熟悉下webpack的一些知识点，从0搭建webpack

huguangzhe 7/28/2024 Vue

Webpack平时在做业务开发的时候很少去改这块配置，时间久了，很多东西都忘了，所以准备从0搭建一下，熟悉下

# 第一步

首先整个新文件夹，打开终端，然后创建一个新目录，或者直接在vscode里面建个新文件夹，并进入该目录；

mkdir my-vue-webpack-project

# 第二步进入当前目录

cd my-vue-webpack-project

# 第三步初始化npm项目

npm init -y

# 第五步安装webpack

npm i -D webpack webpack-cli webpack-dev-server

安装完成之后我们需要配置webpack，在外层建一个build的文件夹，然后在build文件夹中建一个webpack.config.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'), // 打包后的目录，这里会自动创建dist文件夹
        clean: true, // 打包前清空输出目录，相当于clean-webpack-plugin插件的作用,webpack5新增。
    }
}

1
2
3
4
5
6
7
8
9
10

# 第六步安装html-webpack-plugin插件

对项目打包压缩之后，会有一个压缩的js文件，我们需要把这个js文件引入到我们的根入口文件index.html中， html-webpack-plugin这个插件可以自动化完成这个操作

npm i -D html-webpack-plugin

基于以上6步，来个基本的打包示例 1.我们在外层再新建一个pubilc文件夹，在public文件夹里面建一个index.html,之后在webpack.config.js里面引入第六步安装的插件，并写在plugins数组里面，写完之后的webpack.config.js代码如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development', //开发环境
    entry: path.resolve(__dirname,'../src/main.js'),//入口文件
    output: {//输出文件
        path: path.resolve(__dirname,'../dist'),
        filename: '[name].[hash:8].js',//输出文件名
        clean: true, //每次打包前清空dist文件夹
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname,'../public/index.html'),//模板文件
        })
    ],
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.需要在package.json里面加上build打包指令，注意在script对象里面加以下指令

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

3.完成上述内容，就可以在命令行执行npm run build来打包啦

# 第七步安装css相关loader插件解析我们项目中的css

涉及到css我们需要安装一些常用的css处理插件，比如css，less等相关loader

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

之后在webpack.config.js中配置rules

// webpack.config.js
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'] // 从右向左解析原则   
            }
        ]
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 第八步安装autoprefixer ，为css添加浏览器前缀

因为有些CSS属性只支持某个浏览器，或者因为某个属性前端还没形成统一的标准，所以需要在某些css属性上加上各个浏览器的前缀，比如-webkit/-moz等等

.box {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

1
2
3
4
5
6

先安装依赖：

npm i -D postcss-loader autoprefixer

之后在webpack.config.js里面配置postcss-loader以及autoprefixer 插件即可

 module: {
        rules: [
            {
                test: /.less$/,
                exclude: path.resolve(__dirname, 'node_modules'),
                use: ['style-loader', 'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    require('autoprefixer')
                                ]
                            }
                        }
                    },
                'less-loader'] // 从右向左解析原则   
            }
        ]
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 第九步把css样式从js单独抽离出一个文件

安装插件

npm i -D mini-css-extract-plugin

添加插件相关配置【以下包括前面几个步骤的配置，这一步主要看MiniCssExtractPlugin 】

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    mode: 'development', //开发环境
    entry: path.resolve(__dirname,'../src/main.js'),//入口文件
    output: {//输出文件
        path: path.resolve(__dirname,'../dist'),
        filename: '[name].[hash:8].js',//输出文件名
        clean: true, //每次打包前清空dist文件夹
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname,'../public/index.html'),//模板文件
        }),
        new MiniCssExtractPlugin({
            filename: "[name].[hash:8].css",
            chunkFilename: "[id].css",
        })
    ],
     module: {
        rules: [
            {
                // 用正则去匹配要用该 loader 转换的 CSS 文件
                test: /\.css$/,
                exclude: path.resolve(__dirname, 'node_modules'),
                use: [MiniCssExtractPlugin.loader,'css-loader'] // 切记从右向左解析原则
            },
            {
                test: /.less$/,
                exclude: path.resolve(__dirname, 'node_modules'),
                use: [MiniCssExtractPlugin.loader,'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    require('autoprefixer')
                                ]
                            }
                        }
                    },
                    ,'less-loader'] // 从右向左解析原则   
            }
        ]
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

测试打包效果，在src下面新建一个index1.css文件和index2.less文件，并在main.js引入。

之后运行下```npm run build``，可以看到dist下的js和css。main.css整合了src下面两个css

# 第十步 babel转义js文件【比较重要】

首先安装一系列Babel库，babel-loader负责将ES6/7/8等语法转换为ES5语法 core-js负责将新的api进行转化，例如promise、Generator、Set、Maps、Proxy等

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

npm install @babel/plugin-proposal-class-properties --save-dev

上面基本是常用的一些webpack配置项；

# 我们还可以做一些其他配置，比如热更新

安装插件

npm i -D webpack-dev-server

然后把下面这个命令行放在package.json里面的script对象里面

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

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

1
2
3
4
5
6
7

然后就可以npm run dev运行啦

# 正常项目我们还要区分下dev环境和生产环境

新建两个文件夹

webpack.dev.js 开发环境使用 webpack.prod.js 生产环境使用 webpack.config.js 公用配置

安装webpack-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
  }
});

1
2
3
4
5
6
7
8
9
10
11

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

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

1
2
3
4
5
6
7

原先的webpack.config.js也需要做出修改，我们只需要删除mode和devserver字段 packpage.json修改

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

1
2
3
4

胡光喆

Choose mode