webpack 基础配置笔记

Webpack 简介
Webpack 是一个静态资源打包器，简单说就是将浏览器不能识别的模块，比如import，less，打包编译成浏览器可以识别的文件。
Webpack 有5个核心概念
1.Entry 项目打包入口文件
2. Output 打包后资源命名输出目录
3. Loader 让webpack处理那些非js文件，如img
4. plugins 内置一些功能插件，主要是为了优化压缩，如压缩图片
5. Mode 分为生产环境和开发环境，各个环境配置不同
用的loader都要安装下载，这是webpack.config.js 文件内容，基础配置，无优化

const { resolve } = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const htmlWebpackPlugin = require("html-webpack-plugin");
/* 插件介绍，1.HMR ：hot module replacement  热替换  作用：一个模块发生变化，只会重新打包这一个模块。devServer 中 hot：true 开发环境 
                    样式文件：可以直接用，style-loader 内置
                      js： 要做特殊处理，各个绑定，具体查
                   
*/ 
module.exports = {
  //webpack 配置
  //入口起点
  entry: "./src/index.js",
  output: {
    //输出路径
    filename: "build.js",
    //_dirname nodejs的变量，代表当前文件的目录的绝对路径
    path: resolve(__dirname, "build"),
  },
  //loader配置
  module: {
    rules: [
      {
        test: /\.css$/, // 匹配那些文件
        use: [
          //use数组执行顺序，重下到上依次执行
          "style-loader", //创建style标签，添加上去,这边会改成js，如果要提取css单独文件，用下面那个
          // MiniCssExtractPlugin.loader  用这个以后，style-loader不能使用，取代style-loader
          "css-loader", //将css文件变成commomj模块加载js中，样式字符串

          /*处理兼容性
          postcss--> postcs-loader postcss-preset-env
          插件主要帮 postcss找到package.json 中browserslist 里面的配置，通过配置加载指定的css样式   
                 "browserslist":{
                     "development":[
                       "last 1 chrom version",
                        "last 1 firefox version",
                        "last 1 safari version"
                       ],
                     "production":[
                           ">0.2%",
                           "not dead",
                           "not op_mimi all"
                       ]
                      }
      browserslist的基础配置，兼容大部分浏览器，更复杂的看文档
          */

          {
            //要配置的话写对象里，注意这个解析less时候的放置顺序
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              plugins: () => {
                // postcss 插件
                require("postcss-preset-env")();
              },
            },
          },
        ],
      },
      {
        test: /\.less$/, // 匹配那些文件
        use: [
          //use数组执行顺序，重下到上依次执行
          "style-loader", //创建style标签，添加上去

          "css-loader", //将css文件变成commomj模块加载js中，样式字符串
          "less-loader",
        ],
      },
      {
        test: /\.(jpg|png|gif)$/, //不能处理html中的图片，要想处理要用html-loader
        loader: "url-loader", //下载 url-loader（基于file-loader） 和 file-loader ，只用一个loader不用use
        options: {
          //配置文件大小，图片大小小于8K，就会base64处理
          //优点：减少请求数量（减轻服务器压力）
          //缺点： 图片体积会更大（文件请求速度更慢）
          limit: 8 * 1024,
          name: "[hash:10].[ext]", //改变输出的图片名字。太长
          outputPath: "imgs", //生成的文件存放在那个文件夹
        },
      },
      {
        test: /\.js$/,   // js兼容性,如果用了 eslint，要注意使用顺序，先检验 eslint
        exclude:/node_modiles/, //处理时候除去
        loader: "babel-loader", 
        options: {  //写规则
         presets:[   //要下载一个 @babel/polyfill,不然只能兼容简单的,个 @babel/polyfill很大，所以按需，所以要core.js
           [
             '@babel/prest-env',
             {
               useBuiltIns:'usage',  //按需加载
               corejs:{version:3 },  //corejs 版本
               targets:{  //浏览器
                  chrom:'60',
                  firefox:'50'
               }
             }
           ]
         ],
         cacheDirectory:true    //缓存，避免重复
        },
      },
      //
    ],
  },
  //插件配置
  plugins: [
    new MiniCssExtractPlugin(),
    new htmlWebpackPlugin({
      template: "./src/index.html",//会将所有打包资源引入此html
      minify:{
        collapseWhitespace:true,   // 移除空格
        removeComments:true  // 移除注释
      }

    }),
  ],
  mode: "development", //开发模式，生产模式会自动压缩代码
  //   mode:"pr",命令 webpack 和 webpack-dev-serve 一个打包成文件，一个是本地调试
  devServer: {
    conotentBase: resolve(__dirname, "build"),
    //项目构建后路径
    compress: true, //启动gzip压缩
    port: 8000,
    open: true,
    hot:true
  },
};