新手向webpack配置

webpack配置

前言

本人小白一枚，每次使用webpack都要好一番搜索加CV。今天突然心血来潮，准备去网上搜索一番，整理一下webpack的简单使用，避免每次使用都要花费半天时间去百度，一劳永逸。有不对的地方，欢迎各位大佬指正！！！

一、入门（初始配置）

1 新建一个目录，初始化npm

// 初始化项目，对包进行管理
npm init  // 自定义配置
npm init -y  // 生成默认配置

2 安装webpack和webpack-cli

npm install webpack webpack-cli -D(--save-dev)

3 默认配置

1. 新建需要打包的文件：
   在根目录下新建一个文件夹src ,里面新建一个文件main.js,写一点测试代码（如：console.log(“webpack”)）

2. 在package.json中的scripts中添加新的命令：

   "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "build": "webpack ./src/main.js"
   },
   

3. 执行打包命令，打包文件

   npm run build
   

4. 此时会在根目录下生成了一个dist文件夹，并且内部含有main.js。如若没有，说明打包失败。

5. 该例子只是webpack自己默认的配置，更加丰富的自定义配置在后面

4 自定义配置

1. 在根目录下新建一个build文件夹,里面新建一个webpack.config.js

   const path = require('path');
   
   module.exports = {
   mode:'development', // 开发模式
   entry: path.resolve(__dirname,'../src/main.js'), // 入口文件
   output: {
       filename: 'main-min.js', // 打包后的文件名称
       path: path.resolve(__dirname,'../dist') // 打包后的目录
   }
   }
   

2. 更新打包命令

   
   "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "build": "webpack --config build/webpack.config.js",
   },
   

*4 自定义配置例外情况说明

1. 如果不在根目录下新建build文件夹，而是直接在根目录下新建webpack.config.js文件也可。
2. 如果是直接在根目录下新建webpack.config.js文件，webpack.config.js中的一些路径参数要进行修改
3. 这样就可以直接在根目录下运行webpack命令也可以生效，无需在package.json中配置打包命令也可

二、webpack插件使用

5.1 打包前清空dist目录

每次我们重新webpack打包的时候还要把上次打包的dist目录删除掉，麻烦，所以这里下载一个dist目录自动清空插件，以后打包会默认把上次打包内容清空后打包。

1. 下载安装clean-webpack-plugin插件

   npm i clean-webpack-plugin -D
   

2. 导入下载的插件

3. 在webpack.config.js中定义插件配置的属性 plugins ，存放每个插件

4. 每个插件都是一个类，直接new就行

   const path = require("path");
   // 1.先导入下载的插件
   const { CleanWebpackPlugin } = require("clean-webpack-plugin");
   
   module.exports = {
       mode: "development", // 开发模式
       entry: path.resolve(__dirname, "../src/main.js"), // 入口文件
       output: {
           filename: "main-min.js", // 打包后的文件名称
           path: path.resolve(__dirname, "../dist"), // 打包后的目录
       },
       //2.定义插件配置的属性 plugins ，存放每个插件
       plugins: [
           //3.每个插件都是一个类，直接new就行
           new CleanWebpackPlugin(),
       ],
   };
   

5. 上述通过插件清空的方式在webpack5后不再使用，webpack5有新增清空dist目录的方式，在output增加clean字段，现补充如下

   const path = require("path");
   
   module.exports = {
       mode: "development", // 开发模式
       entry: path.resolve(__dirname, "../src/main.js"), // 入口文件
       output: {
           filename: "main-min.js", // 打包后的文件名称
           path: path.resolve(__dirname, "../dist"), // 打包后的目录
           clean: true, // 开启打包前清空dist目录
       },
   };
   

5.2 转义js文件，兼容性处理

1. 下载插件

   npm i babel-loader @babel/preset-env @babel/core -D
   

2. 插件的使用

   // ......
   module.exports = {
       // ......
       module: {
           rules: [{
               test: /\.js$/,
               loader: 'babel-loader',
               exclude: /(node_modules|bower_components)/,
               options: {
                   presets: ['@babel/preset-env']
               }
           }]
       },
   };
   

3. 你会发现IE浏览器还是会出现不兼容的问题，因为上面的方法是针对一些兼容问题，还有一些兼容性问题并不能解决。我们还可以使用@babel/polyfill和core-js两种方法暴力解决

4. polyfill

   1. 下载插件

      npm i @babel/polyfill -D
      

   2. 使用polyfill

      在文件中通过js引入：

      import '@babel/polyfill'
      
      const add = (x, y) => {
          return x + y;
      }
      console.log(add(2, 3));
      
      new Promise(function(resolve) {
          resolve(1)
      }).then(function(res) {
          console.log(res, 'promise')
      })
      

5. core-js

   1. 下载插件

      npm i core-js -D
      

   2. 使用core-js

      在webpack.config.js里面引入使用：

      // ......
      module.exports = {
          // ......
          module: {
              rules: [{
                  test: /\.js$/,
                  exclude: /node_modules/,
                  use: {
                      loader: 'babel-loader',
                      options: {
                          presets: [
                              [
                                  '@babel/preset-env',
                                  {
                                      useBuiltIns: 'usage',
                                      corejs: {
                                          //core-js的版本
                                          version: 3
                                      },
                                      //需要兼容的浏览器
                                      targets: {
                                          chrome: '60',
                                          firefox: '60',
                                          ie: '9',
                                          safari: '10',
                                          edge: '17'
                                      }
                                  }
                              ]
                          ]
                      }
                  }
              }]
          },
      };
      

6. 插件作用解析

   • babel-loader默认只转换新的JavaScript句法，而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。
   • polyfill 指的是“用于实现浏览器不支持原生功能的代码”，比如，现代浏览器应该支持 fetch函数，对于不支持的浏览器，网页中引入对应 fetch 的 polyfill 后，这个 polyfill就给全局的window对象上增加一个fetch函数，让这个网页中的 JavaScript 可以直接使用 fetch函数了，就好像浏览器本来就支持 fetch 一样
   • core-js负责将新的api进行转化，例如promise、Generator、Set、Maps、Proxy等

7. 使用webpack5打包之后会出现一中情况，打包文件默认输出形式是箭头函数，使用babel转也不行

   解决方法： 修改构建目标 target，使得 Webpack 生成 web 平台的运行时代码，并且只使用 ES5 相关的特性：

   module.exports = {
       target: ['web', 'es5'],
   }
   

三、区分开发环境和生产环境

• development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。

• 在开发环境中，我们需要①强大的 source map 和一个有着 ②live reloading(实时重新加载) 或 ③hot module replacement(热模块替换) 能力的 localhost server。

• 生产环境目标则转移至其他方面，关注点在于①压缩 bundle、②更轻量的 source map、③资源优化等，通过这些优化方式改善加载时间。

1.新增开发环境下的文件和生产环境下的文件

由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。所以我们在原来webpack.config.js的基础上再新增两个文件webpack.prod.js和webpack.dev.js

2.安装webpack-merge

这里我们需要使用webpack-merge帮我们merge代码

npm i -D webpack-merge

3.使用webpack-merge

// webpack.dev.js
const path = require("path");
const { merge } = require("webpack-merge");
const common = require("./webpack.config.js");

module.exports = merge(common, {
    mode: "development",
    devtool: "inline-source-map",
    devServer: {
        hot: true, //热更新
        open: true, //编译完自动打开浏览器
        compress: true, //开启gzip压缩
        port: 3000, //开启并设置端口号
        //托管的静态资源文件
        //可通过数组的方式托管多个静态资源文件
        static: {
            directory: path.join(__dirname, "../public"),
        },
    },
});

// webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.config.js');

module.exports = merge(common, {
  mode: 'production',
});

4.修改webpack.config.js

删除mode和devserver字段:

const path = require("path");
// 1.先导入下载的插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    entry: path.resolve(__dirname, "../src/index.js"), // 入口文件
    output: {
        filename: "index-min.js", // 打包后的文件名称
        path: path.resolve(__dirname, "../dist"), // 打包后的目录
        // clean: true, // 开启打包前清空打包目录
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /(node_modules|bower_components)/,
                options: {
                    presets: ["@babel/preset-env"],
                },
            },
        ],
    },
    //2.定义插件配置的属性 plugins ，存放每个插件
    plugins: [
        //3.每个插件都是一个类，直接new就行
        new CleanWebpackPlugin(),
    ],
    target: ["web", "es5"],
};

5.安装webpack-dev-server

npm install webpack-dev-server -D

6.使用webpack-dev-server，修改package.json中的scripts命令

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config build/webpack.prod.js",
    "dev": "webpack-dev-server --config build/webpack.dev.js"
  },