(syntax)webpack

webpack

• 安装 webpack webpack-cli
• webpack命令： webpack .\src\main.js -o .\dest\bundle.js
• 配置文件： webpack.config.js package.json
• 两个环境： 生产环境 与 开发环境
• 四大核心概念 Entry Output Loader Plugins

webpack.config.js

const path = require('path')
// 在配置文件中，需要手动指定入口和出口 exports出口
console.log(path)
module.exports = {
    //	入口，表示，要使用webpack打包那个文件
    entry: path.join(__dirname, './src/main.js'),
    output: { // 输出文件相关的配置
        path: path.join(__dirname, './dist'),//指定打包好的文件，输出到哪个目录中去
        filename: 'bundle.js' //输出的文件的名称
    }
}

• package.json

script:{
	"dev":"webpack --mode development",
	"build":"webpack --mode production "
}

• plugin

  • webpack-dev-serve 自动运行项目 -D
    • npm install webpack-dev-server@2.9.7 -D
    • webpack-dev-server的版本太高的锅，3.以上的还是不行。所以降到2.11.3一下左右即可

  "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"devServer:{ // 配置dev-server命令参数的第二次形式，相对来说，这种方式麻烦一些    open:true, //自动打开浏览器    port:3000,// 设置启动时候的运行端口    contentBase: 'src'//指定托管的根目录 src 要带 ‘’ 号    hot:true // 启用热更新 }plugins:[ //数组    new webpack.HotModuleReplacementPlugin();    //new 一个热更新的模块对象 这是启动更新]

  • html-webpack-plugin npm i html-webpack-plugin -D

  const webpack = require('webpack')const htmlWebpackPlugin = require('html-webpack-plugin')plugins:[     new webpack.HotModuleReplacementPlugin(),//创建一个在内存中，生成HTML页面的插件   new htmlWebpackPlugin({  	template:path.join(_dirname,'./src/index.html'),   	//指定模板页面，会根据指定的页面路径，去生成内存中的页面   	filename:'index123.html' //指定生成的页面的名称    })]

• loader

  • css
    • npm i style-loader css-loader -D css
    • npm i less-loader less -Dless
    • npm i sass-loader node-sass -Dscss
  • image 字体
    • npm i url-loader file-loader -D
  • babel

  //第一套包 babel转换工具npm i babel-core babel-loader babel-plugin-transform-runtime -Dbabel-core/loader plugin-transform-runtime //第二套包 语法插件npm i babel-preset-env babel-preset-stage-0 -Dbabel-preset- env/stage-0

  module:{
  	rules:[
  		{test:/\.css&/,use:['style-loader','css-loader']},
  		{test:/\.less&/,use:['style-loader','css-loader','less-loader']},
          {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
          {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
          {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7631$name=[name].[ext]'}
          { test:/\.js$/,use:'babel-loader',exclude:/node_modules/ }
  	]
  }
  
  // presets  语法
  .babelrc文件
  {
  	"presets":["env","stage-0"], //语法
  	"plugins":["transform-runtime"] //插件
  }