likes
comments
collection
share

webpack5学习

作者站长头像
站长
· 阅读数 29

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文件等等
  • 处理cssloader

     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.处理lessloader

  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