Webpack配置项

运行指令：

开发环境：

webpack ./src/index.js -o ./build/built.js --mode=development

生产环境：

webpack ./src/index.js -o ./build/built.js --mode=production

webpack会以./src/index.js为入口文件开始打包，打包后输出到./build/built.js整体打包环境

1. webpack能处理js/json资源，不能处理css/img等其他资源

2. 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化

3. 生产环境比开发环境多一个压缩js代码。

配置文件

根目录新建**package.json**

{
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "eslintConfig": {
    "extends": "airbnb-base"
  },
  "sideEffects"：["*.css"],
}

根目录新建**webpack.config.js**

webpack的配置文件作用：指示webpack干哪些活（当你运行webpack指令时，会加载里面的配置）
所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs.

/*
 *	开发环境配置：能让代码运行
 *		运行项目指令：
 *			webpack 会将打包结果输出出去
 *			npx webpack-dev-server 只会在内存中编译打包，没有输出
 */

// resolve用来拼接绝对路径
const { resolve } = require("path");
// 处理html
const HtmlWebpackPlugin = require("html-webpack-plugin");
// css兼容
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 压缩css
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

// 设置node环境变量
proces.env.NODE_ENV = "developement";

/*
 * 缓存：
 *  babel缓存 --> 让二次打包构建速度更快
 *    cacheDirectory: true
 * 文件资源缓存 --> 让代码上线运行缓存更好使用
 *  hash：每次webpack构建时会生成一个唯一的hash值。
 *    问题：因为js和css同时使用一个hash值。
 *      如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）
 *  chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样
 *    问题：js和css的hash值还是一样的
 *      因为css是在js中被引入的，所以同属于一个chunk
 *  contenthash：根据文件的内容生成hash值。不同文件hash值一定不一样
 *
 * tree shaking：去除无用代码
 *  前提：1.必须使用ES6模块化 2.开启production环境
 *  作用：减少代码体积
 *
 *  在package.json中配置
 *    "sideEffects"：false所有代码都没有副作用（都可以进行tree shaking）
 *      问题：可能会把css/@babel/polyfil1（副作用）文件干掉
 *    "sideEffects"：["*.css"，"*.less"]
 */

const commonCssLoader = [
  // 创建style标签，将js中的样式资源插入进行，添加到head中生效
  // 'style-loader',
  // 这个loader取代style-loader，作用：提取js中的css成单独文件
  MiniCssExtractPlugin.loader,
  // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
  "css-loader",
  /* css兼容性处理：postcss --> postcss-loader postcss-preset-env
   *	帮postcss找到package.json中browserslist里的配置，通过配置加载css兼容性样式
   *	"browserslist": {
   *		// 开发环境：设置node环境变量：proces.env.NODE_ENV = 'developement'
   *   	"development": [
   *   		"last 1 chrome version",
   *   		"last 1 firefox version",
   *   		"last 1 safari version"
   *		],
   *		// 生产环境：默认是看生产环境（与mode配置无关）
   *   	"production": [
   *    	">0.2%",
   *			"not dead",
   *			"not op_mini all"
   *  	]
   *	}
   */
  // 使用loader的默认配置
  // 'postcss-loader',
  // 修改loader的配置
  {
    loader: "postcss-loader",
    options: {
      ident: "poctcss",
      plugins: () => [
        // postcss的插件
        require("postcss-preset-env")(),
      ],
    },
  },
];

module.exports = {
  // webpack配置
  // 模式（生产环境时会压缩js代码）
  mode: "development",
  // mode: 'production',

  // 入口起点
  entry: ["./src/js/index.js", "./src/index.html"],
  output: {
    // 输出文件名
    filename: "js/built.[contenthash:10].js",
    // 输出路径
    // __dirname nodejs的变量，代表 当前文件目录的绝对路径
    path: resolve(_dirname, "build"),
  },
  // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
  // 特点：只会在内存中编译打包，不会有任何输出
  // 启动derServer指令为：npx webpack-dev-server
  devServer: {
    // 项目构建后路径
    contentBase: resolve(__dirname, "build"),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 8080,
    // 自动打开浏览器
    open: true,
    /*
     * 开启HMR热更新功能
     * HMR：hot module replacement热模块替换/模块热替换作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块），极大提升构建速度
     *
     * 样式文件：可以使用HMR功能：因为style-loader内部实现了~
     * js文件：默认不能使用HMR功能-->需要修改js代码，添加支持HMR功能的代码
     *  注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。
     *  if (module.hot) {
     *    // 一旦 module.hot 为 true，说明开启了HMR功能。--> 让HMR功能代码生效
     *    module.hot.accept('./print.js', function () {
     *      // 方法会监听print.js文件的变化，一旦发生变化，其他模块不会重新打包构建。
     *      // 会执行后面的回调函数
     *      print()
     *    })
     *  }
     *
     * html文件：默认不能使用HMR功能，同时会导致问题：html文件不能热更新了~（不用做HMR功能）
     *  解决：修改entry入口，将html文件引入
     */
    hot: true,
  },
  // loader的配置
  module: {
    rules: [
      // 详细loader配置
      // 不同文件必须配置不同loader处理,
      {
        /*
         *  语法检查：eslint-loader eslint
         *  注意：只检查自己写的源代码，第三方的库是不用检查的
         *  设置检查规则：package.json中eslintkonfig中设置
         *    "eslintConfig": {
         *      "extends": "airbnb-base"
         *    }
         *  airbnb--> eslint-config-airbnb-base eslint-plugin-import eslint
         */
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        // 优先执行，需要优先于js代码兼容性处理执行，避免冲突
        enforce: "pre",
        options: {
          // 自动修复eslint的错误
          fix: true,
        },
      },
      {
        /*
         * 正常来讲，一个文件只能被一个loader处理。
         * 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：先执行eslint在执行babel
         * 注意：不能有两个配置处理一种类型
         */
        oneOf: [
          {
            // 匹配css文件
            test: /\.css$/,
            // 使用那些loader进行处理
            // 要使用多个loader处理使用use
            // use数组中loader执行顺序：从右到左、从下到上，依次执行
            use: [...commonCssLoader],
          },
          {
            test: /\.less$/,
            use: [...commonCssLoader, "less-loader"],
          },
          {
            /*
             *  js兼容性处理：babel-loader @babel/core
             *  使用1、3方法，2体积太大不考虑
             *    1. 基本js兼容性处理 --> @babel/preset-env
             *      问题：只能转换基本语法，如promise高级语法不能转换
             *    2. 全部js兼容性处理 --> @babel/polyfill
             *      使用方法：在需要处理代码兼容性的js文件import引入@babel/polyfill
             *      问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，代码体积变大了
             *    3. 需要做兼容性处理的代码就做按需加载 --> core-js
             */
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            options: {
              // 预设：指示babel做怎么样的兼容性处理
              presets: [
                [
                  "@babel/preset-env",
                  {
                    // 按需加载
                    useBuiltIns: "usage",
                    // 指定core-js的版本
                    corejs: {
                      version: 3,
                    },
                    // 指定兼容性做到那个版本的浏览器
                    targets: {
                      chrome: "60",
                      firefox: "60",
                      ie: "9",
                      safari: "10",
                      edge: "17",
                    },
                  },
                ],
              ],
              // 开启babel缓存
              // 第二次构建时，会读取之前的缓存
              cacheDirectory: true,
            },
          },
          {
            // 处理图片资源
            // 不会处理html内的图片
            test: /\.(jpg|png|gif)$/,
            // 使用一个loader
            // url-loader依赖file-loader
            loader: "url-loader",
            options: {
              // 图片大小小于8kb，就会被base64处理
              // 优点：减少请求数量（减轻服务器压力）
              // 缺点：图片体积会更大（文件请求速度更慢）
              limit: 8 * 1024,
              // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
              // 解析时会出问题：[object Module]
              // 解决：关闭ur1-loader的es6模块化，使用commonjs解析
              esModule: false,
              // 给图片进行重命名
              // [contenthash:10]取图片的hash的前10位
              // [ext]取文件原来扩展名
              name: "[contenthash:10].[ext]",
              // 输出目录
              outputPath: "img",
            },
          },
          {
            // 处理html文件内的img图片（负责引入img，从而能够被url-loader进行处理）
            test: /\.html$/,
            loader: "html-loader",
          },
          {
            // 打包其他资源
            exclude: /\.(html|css|js|less|scss|jpg|png|gif)$/,
            loader: "file-loader",
            options: {
              name: "[contenthash:10].[ext]",
              outputPath: "media",
            },
          },
        ],
      },
    ],
  },
  // plugins的配置
  plugins: [
    // 详细plugins的配置
    // html-webpack-plugin
    // 功能：自动引入打包输出的所有资源(js/css)
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      // 代码压缩
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true,
      },
    }),
    new MiniCssExtractPlugin({
      // 指定输出文件
      filename: "css/built.[contenthash:10].css",
    }),
    // 压缩css
    new OptimizeCssAssetsWebpackPlugin(),
  ],
  /*
   *  source-map：一种提供源代码构建后代码映射的技术(生成代码到原始代码的映射方法)
   *  [inline-|hidden-leval-][nosources-][cheap-[module-]]source-map
   *    source-map：外部
   *      错误代码的准确信息 和 源代码的错误位置
   *    inline-source-map：内联
   *      只生成一个内联source-map
   *      错误代码的准确信息 和 源代码的错误位置
   *    hidden-source-map：外部
   *      错误代码错误原因，但是没有错误位置
   *      不能追踪源代码错误位置，只能提示到构建后代码的错误位置
   *    eval-source-map：内联
   *      每一个文件都生成对应的source-map，都在eval
   *      错误代码的准确信息 和 源代码的错误位置
   *    nosources-source-map：外部
   *      错误代码的准确信息，但是没有任何源代码信息
   *    cheap-source-map：外部
   *      错误代码的准确信息 和 源代码的错误位置
   *      只能精确到行
   *    cheap-module-source-map：外部
   *      错误代码的准确信息 和 源代码的错误位置
   *      module会将loader的source map加入
   *
   *  开发环境：eval-source-map
   *  生产环境：hidden-source-map / nosources-source-map
   *
   *  内联和外部的区别：1，外部生成了文件，内联没有2，内联构建速度更快
   */
  devtool: "eval-source-map",
};