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

webpack5学习