webpack5学习

webpack5学习

webpack.config.js配置

entry

• 入口文件配置，webpack根据该配置文件进行打包

  module.exports={
      ...
       // 入口文件，从哪个文件开始打包
    entry: "./src/index.js",
      ...
  }

output

• 打包后的输出位置

  const {resolve}=require("path")
  module.exports={
    output: {
      // 打包后的文件名字
      filename: "build.js",
      // 打包的绝对路径
      path: resolve(__dirname, "build"),
    },
  }

  loader

• 把浏览器不认识的文件翻译成浏览器能够认识的文件，例如将less文件翻译成css文件等等

• 处理css的loader

   npm i css-loader style-loader

 module.exports={
     ...
     //安装css-loader  style-loader
   module: {
     rules: [
       {
         //   匹配哪些文件，通常是用正则表达式
         test: /\.css$/,
         //   use的执行顺序是从右到左，从下到上
         use: [
           //   创建style标签，将js中的样式插入到style里面，然后将style里面的样式插入到head标签当中
           "style-loader",
           //   将css处理成commonjs模块，里面的内容是样式字符串。
           "css-loader",
         ],
       },
     ],
   },
     ...
 }

2.处理less的loader

  npm i less less-loader

module.exports={
    ...
     // loaders配置
  module: {
    rules: [
      //   处理less文件，不同的文件要用不同的loader
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          //   将less文件翻译成css文件
          "less-loader",
        ],
      },
    ],
  },
    ...
}

3.处理图片资源

安装file-loader url-loader

npm i file-loader url-loader

module.exports={
    ...
      {
        test: /\.(png|jpg|gif)$/,
        //   需要下载url-loader 和file-loader
        loader: "url-loader",
        options: {
          // 图片小于 10kb,会被 base64处理
          // 优点：减少请求数量（减轻服务器压力）
          // 缺点：图片体积会更大（文件请求速度更慢）
          limit: 3 * 1024,
          // 问题：url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs，解析时会出现问题：[object Module]
          // 解决：关闭url-loader的es6模块化，使用commonjs解析
          esModule: false,
          // 给图片重命名
          // [hash:6] 取图片的hash的前6位
          // [ext] 取文件原来的扩展名
          //   name: "[name].[hash:6][ext]",
        },
        type: "javascript/auto",//用老版本写法
      },
    ...
}

4.处理html文件中引入图片的问题

安装html-loader

npm i html-loader

module.exports={
    ...
      //   处理html中的img图片引入问题
     {
        test: /\.html$/,
        loader: "html-loader",
      },
    ...
}

5.处理其他资源（iconfont图标）

 module.exports={
      ...
          //   处理其他资源（除了js，html，css）以外的资源
      {
        exclude: /\.(css|js|html)$/,
        loader: "file-loader",
        options: {
          //解决:关闭url-loader的es6模块化，使用commonjs解析
          esModule: false,
          outputPath: "icon/",
        },
        type: "javascript/auto",
      }, 
      
      ...
  }

6.处理css样式前缀

npm i postcss-loader postcss-preset-env

// process.env.NODE_ENV="development"//设置运行环境
module.exports = {
    ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // "style-loader",
          MiniCssWxtractPlugin.loader,
          "css-loader",
          {
            loader: 'postcss-loader',
            // options: {
            //   ident: 'postcss',
            //   plugins: () => [
            //     require('postcss-preset-env')()
            //   ]
            // }
          }
        ],
      },
      {
        test: /\.less$/,
        use: [
          // "style-loader",
          MiniCssWxtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "less-loader",
        ],
      },
    ],
  },
...
};

​ 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"
  ]
}

在webpack.config.js同级新建postcss.config.js配置如下

module.exports = {
  plugins: [
    [
      //postcss-preset-env插件读取package.json文件中的browserslist配置
      require("postcss-preset-env")(),
    ],
  ],
};

7.处理js兼容性问题

module.exports = {
  module: {
    rules: [
      //js的兼容处理
      //需要下载babel-loader @babel/preset-env  @babel/core  @babel/polyfill
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-env",
              {
                useBuiltIns: "entry",
                corejs: {
                  version: 3,
                },
                // targets: {

                // }
              },
            ],
          ],
        },
      },
    ],
  },
};

plugins

• 利用插件处理更复杂的逻辑，例如压缩文件等等

  1.处理html模板

  安装html-webpack-plugin

  npm i html-webpack-plugin

   const HtmlWebpackPlugin = require("html-webpack-plugin");
   module.exports={
           ....
    // plugins配置
    plugins: [new HtmlWebpackPlugin(
      {
        template:'./index.html'，
       //压缩html代码
        minify: {
          collapseWhitespace: true,
          removeComments:true
        }
    }
    )],
        ....
   }

  2.将css文件提取到单独的文件

  安装npm i mini-css-extract-plugin 插件

  const MiniCssWxtractPlugin=require('mini-css-extract-plugin')
  module.exports = {
      ...
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            // "style-loader",
            MiniCssWxtractPlugin.loader,
            "css-loader",
          ],
        },
        {
          test: /\.less$/,
          use: [
            // "style-loader",
            MiniCssWxtractPlugin.loader,
            "css-loader",
            "less-loader",
          ],
        },
      ],
    },
    plugins: [
      new MiniCssWxtractPlugin({
        filename: "css/index.css",
      }),
    ],
      ...
  };
  

  3.压缩css插件

  安装css-minimizer-webpack-plugin

  npm i css-minimizer-webpack-plugin

  const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
  module.exports = {
    plugins: [
      new CssMinimizerWebpackPlugin({
        test: /\.css$/g,
      }),
    ],
  };
  

mode

• 项目的环境模式分为development和production模式

  module.expots={
      ...
       // 模式
    mode: "development",//分为development和production模式，production模式下会进行代码压缩
      ...
  }

webpack打包命令

webpack 入口文件  -o 输入文件地址  --mode=production/development

1.webpack可以处理js、json文件，不能处理css、图片文件（需要安装loader或者插件）

2.生产环境打包生成的文件会压缩，而开发环境不会压缩

3.可以处理es6模块化。

devServer

安装webpack-dev-server

npm i webpack-dev-server

module.exports={
    ...
      devServer: {
    // 打包后的地址
        static: resolve(__dirname, "build"),
        // 端口号
        port: 3000,
        // 开启热更新
        hot: true,
        // 开启gzip压缩
        compress: true,
        // 监听模板，用于自动更新浏览器
        watchFiles: ["./index.html"],
  },
    ...
}

启动命令

webpack serve或者npx webpack-dev-server