webpack

webpack.config.js配置项模板

const path = require('path'),
	HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: "development",  // development 开发环境    production  生产环境
  // 入口文件  多页面要写成对象格式
  entry:{
    // 名: 路径
    index:path.resolve(__dirname, './src/js/index.js');
  },
  // 打包
  outpyt:{
    // 打包到哪个文件夹下
    path: path.resolve(__dirname, '/dist'),
    filename: 'js/[name].js'   //  name是一个变量，自动去寻找entry 下的文件名
  },
  // 配置规则
  module:{
    rules:[
      // 匹配相同文件后缀结尾的文件，规定这类文件要使用什么loader
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: path.resolve(__dirname, 'node_modules')  // 编译转换时 排除node_modules 内的js文件 
      },
      {
        test: /\.css$/,
        // 需处理多个loader时，写成数组形式
        // 处理 use 数组时， 案由下到上的顺序，先经过 css-loader  再处理 style-loader
        use:[
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        use:[
          'style-loader',
          'css-loader',
          'scss-loader'
        ]
      },
      {
        test: /\.tpl$/,
        loader: 'ejs-loader'
      }
    ]
  },
  // 放入实例化对象， 例： 需要处理html时，require('html-webpack-plugin') 需要引入对应插件（一个构造函数）
  // 所有的loader 都不会导入到配置文件中， 以plugin结尾的一般都需要导入
  plugins:[
    new HtmlWebpackPlugin({
      minify:{
        // 移除所有注释
        removeComments: true,
        // 清除所有的空格和换行
        collapseWhitespace: true
      },
      // 打包后的文件名称
      filename: 'index.html',
      // 需要打包的文件
      template: path.resolve(__dirname, '/src/index.html'),
      // 入口文件 取决于 entry 里的键名，如果有多个，使用数组的形式
      chunks:['index'],
      // 排除node_modules
      excludeChunks: ['node_modules']
    })
  ],
  devServer:{
    // 当启动devServer时 自动打开浏览器
    open: true,
    // 主机
    host: 'localhost',
    // 端口号
    port: 3300
  }
}

配置运行 webpack 的命令

package.json

"scripts": {
  "...": "...",
  "dev": "webpack-dev-server --config webpack.config.js --reason  --color  --progress",
  // 打包时的命令
  "webpack": "webpack --config webpack.config.js"
}

dev配置可选项

webpack-dev-server          启动服务
--content-base dist/        dev-server 运行的目录
--hot                       热启动
--config webpack.config.js  webpack配置项
--progress                  打包的进度
--display-modules           打包时的模块
--colors                    打包时输出彩色文字
--display-reasons           打包时的提示信息

依赖项

安装在开发环境下的
–save-dev / -D
安装在生产环境下 例：ejs
–save / -S

• webpack 必备工具:

  webpack
  webpack-cli
  webpack-dev-server

• 处理JS -> ES6 ES7 ES8 装饰器 babel 编译

  ES6：
  babel-loader@7
  babel-core
  babel-preset-env
  ES7:
  babel-plugin-transform-runtime
  ES8:
  babel-plugin-transform-decorators
  babel-plugin-transform-decorators-legacy

• 样式处理 sass -> css -> style

  sass-loader
  node-sass
  css-loader
  style-loader

Forth Step:

• 模板处理 ejs || tpl

  ejs-loader

• 处理HTML

  html-webpack-plugin