WebPack5构建第一个项目

一、初始化项目

1、新建项目目录，初始化 npm

 npm init

根据提示输入项目相关信息

2、安装Webpack包

 npm install -D webpack webpack-cli webpack-dev-server

3、创建配置webpack.config.js和入口main.js

先新建src目录，并在src目录下新建main.js文件
之后在根目录新建build目录，并创建webpack.config.js配置文件

│  package.json
├─build
│      webpack.config.js
└─src
        main.js

把下面的代码添加到配置文件中

 const path = require('path');

 module.exports = {
    mode: 'development', // 开发模式
    entry: path.resolve(__dirname, '../src/main.js'), // 入口文件
    output: {
        filename: '[name].[hash:8].js', // [name] 指entry属性名字, 默认为main
        path: path.resolve(__dirname, '../dist'), // 打包后的目录
        clean: true, // 打包前清空输出目录，相当于clean-webpack-plugin插件的作用,webpack5新增。
    }
 }

4、安装html-webpack-plugin插件

这个插件可以打包后创建html文件，并将打包好的js文件引入到创建的html中。

 npm i -D html-webpack-plugin

安装完成后，在项目根目录新建pubilc目录，在public目录下新建index.html，然后更改webpack.config.js配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            // 选取一个html作为模版，在dist目录下会生成一个相同的html，之后将打包好的js注入到该html文件
            template: path.resolve(__dirname, '../public/index.html')
        })
    ]
}

同时在package.json中添加一行打包命令：

 "build": "webpack --config build/webpack.config.js"

运行npm run build进行打包，可以看到生成的dist目录下的index.html中已经引入了js文件。

5、引用CSS

在引入css时需要一些loader来解析我们的css：

 npm i -D style-loader css-loader less less-loader

将下面的内容添加到配置文件中：

 module.exports = {
    //.......
    module: {
        rules: [
            {
                // 用正则去匹配要用该 loader 转换的 CSS 文件
                test: /\.css$/,
                exclude: path.resolve(__dirname, 'node_modules'),
                use: ['style-loader', 'css-loader'] // 切记从右向左解析原则
            },
            {
                test: /.less$/,
                exclude: path.resolve(__dirname, 'node_modules'),
                use: ['style-loader', 'css-loader', 'less-loader'] // 从右向左解析原则   
            }
        ]
    }
 }

6、为css添加浏览器前缀

安装插件：

 npm i -D postcss-loader autoprefixer 

引入autoprefixer有两种方式：

1) 在项目根目录下创建一个postcss.config.js文件，配置如下：

module.exports = {
    plugins: [require('autoprefixer')]  // 引用该插件即可
}

2) 直接在webpack.config.js里配置：

// webpack.config.js
module.exports = {
    //........
    module: {
        rules: [{
            test: /\.less$/,
            use: ['style-loader', 'css-loader', {
                loader: 'postcss-loader',
                options: {
                    plugins: [require('autoprefixer')]
                }
            }, 'less-loader'] // 从右向左解析原则
        }]
    }
}

这里我们使用第一种方式，之后在webpack.config.js里配置postcss-loader：

module.exports = {
    //.......
    module: {
        rules: [
            {
                // 用正则去匹配要用该 loader 转换的 CSS 文件
                test: /\.css$/,
                exclude: path.resolve(__dirname, 'node_modules'),
                use: ['style-loader', 'css-loader', 'postcss-loader'] // 切记从右向左解析原则
            },
            {
                test: /.less$/,
                exclude: path.resolve(__dirname, 'node_modules'),
                use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] // 从右向左解析原则   
            }
        ]
    }
}

7、提取css样式到单独的css文件中

安装插件：

 npm i -D mini-css-extract-plugin

修改配置文件：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    //...省略其他配置
    module: {
        rules: [
            {
                // 用正则去匹配要用该 loader 转换的 CSS 文件
                test: /\.css$/,
                exclude: path.resolve(__dirname, 'node_modules'),
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'] // 切记从右向左解析原则
            },
            {
                test: /.less$/,
                exclude: path.resolve(__dirname, 'node_modules'),
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'],
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].[hash:8].css",
            chunkFilename: "[id].css",
        })
    ]
}

在src目录下新建index.css和index.less两个文件，并在main.js中引入。

然后运行打包命令，可以看到dist目录下多出一个css文件，并且这个css文件整合了src下面的css和less。

8、babel转义js文件

先安装插件：

npm i -D babel-loader @babel/preset-env @babel/core @babel/plugin-proposal-decorators
npm i -D @babel/plugin-transform-arrow-functions @babel/plugin-transform-runtime

修改webpack.config.js配置文件：

rules: [
    {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
            options: {
                // 缓存，加快babel-loader编译速度
                cacheDirectory: true,
                // 一系列插件的集合，包括处理箭头函数等
                // useBuiltIns corejs 解决es6新增api无法编译问题（只能编译语法，例如箭头函数）
                presets: [
                    ['@babel/preset-env', {useBuiltIns: 'usage', corejs: 3, targets: 'defaults'}]
                ],
                plugins: [
                    // 编译箭头函数
                    '@babel/plugin-transform-arrow-functions',
                    // 编译装饰器
                    ['@babel/plugin-proposal-decorators', {legacy: true}],
                    // 编译类，loose true时是赋值法定义属性，false时是使用Object.defineProperty定义属性，后者是默认
                    ['@babel/plugin-proposal-class-properties', {loose: false}]
                ]
            }
        }
    }
]

9、图片、音频和字体文件处理

在webpack5以前，需要安装file-loader和url-loader处理，但是webpack内置了资源模块（asset module），代替了file-loader和url-loader，所以只需要这样做即可：

  {
      test:/\.svg$/,
      type:'asset',
      generator:{
          filename:"icons/[name]--[hash:8].[ext]"
      }
  },
  {
      test:/\.(png|jpe?g|gif)(\?.*)?$/,
      type:'asset',
      generator: {
          filename: 'imgs/[name]--[hash:8].[ext]'
      }
  },
  {
      test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
      type: 'asset',
      generator: {
          filename: 'media/[name]--[hash:8].[ext]'
      }
  },
  {
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      type: 'asset',
      generator: {
          filename: 'fonts/[name]--[hash:8].[ext]'
      }
  }

二、区分开发环境和生成环境

1、热更新配置

安装 webpack-dev-server 启动一个本地服务并且配置热更新：

 npm i -D webpack-dev-server

修改配置：

module.exports = {
    // ...
    devServer: {
        port: 3000,
        // 根据需要是否开启以下配置
        // hot: true, //热更新
        // open: true, //编译完自动打开浏览器
        // compress: true,//开启gzip压缩
        // static: { //托管静态资源文件
        //     directory: path.join(__dirname, "../public"),
        // },
        // client: { //在浏览器端打印编译进度
        //     progress: true,
        // },
    }
}

然后配置打包命令：

"dev": "webpack serve --config build/webpack.config.js"

2、区分开发环境与生产环境的关系

build目录下新建两个文件：

• webpack.dev.js 开发环境使用
• webpack.prod.js 生产环境使用

使用webpack-merge帮我们merge代码：

npm i -D webpack-merge

修改webpack.dev.js

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

module.exports = merge(common, {
  mode: 'development',
  devServer:{
    port:3000
  }
});

修改webpack.prod.js

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

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

原先的webpack.config.js也需要做出修改，只需要删除mode和devserver字段就行了
最后package.json中的scripts命令如下：

"scripts": {
    "build": "webpack --config build/webpack.prod.js",
    "dev": "webpack serve --config build/webpack.dev.js"
  },

开发环境运行npm run dev,打包npm run build

3、定义环境变量

首先安装cross-env插件，是一个运行跨平台设置和使用环境变量的脚本：

npm i cross-env -D

之后更改打包命令：

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack serve --config build/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

新建config文件夹，并新建dev.env.js：

module.exports = {
    NODE_ENV: '"development"',
    url: '"http://xxxxxx"'
};

新建webpack.dev.js

const env = require("../config/dev.env");
const webpack =require("webpack")

module.exports = merge(common,{
  plugins: [
    new webpack.DefinePlugin({
      "process.env": env,
    }),
  ],
})

可以在main.js中process.env(prod同理)。

三、持续优化

1、打包文件分析工具webpack-bundle-analyzer

// 安装
npm i webpack-bundle-analyzer -D

// 配置
//webpack.prod.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 

plugins:[
    new BundleAnalyzerPlugin()
]

运行 npm run build ，编译结束新开一个页面，可以看到bundle之间的关系

2、通过splitChunks分离chunks

// webpack.prod.js
module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
}

3、开启gzip压缩-compression-webpack-plugin

安装插件：

 npm i compression-webpack-plugin -D

//webpack.prod.js
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  plugins: [new CompressionPlugin()],
};

4、优化和压缩CSS-css-minimizer-webpack-plugin

安装插件：

 npm i css-minimizer-webpack-plugin --save-dev

//webpack.prod.js
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

plugins:[
    new CssMinimizerPlugin(),
]