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