关于webpack5: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