乐趣区

关于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 文件等等
  • 解决 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

退出移动版