webpack多页应用打包

# 项目创建--默认目录结构

fitness-app
├── src
│   ├── css
│   │   ├── home.less
│   │   ├── login.less
│   │   └── register.less
│   ├── fonts
│   ├── img
│   ├── js
│   │   ├── home.js
│   │   ├── login.js
│   │   └── register.js
│   ├── lib
│   └── page
│       ├── home.html
│       ├── login.html
│       └── register.html
├── .babelrc
├── package.json
└── webpack.config.js

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

# 1.多页面应用打包

# 1.1多页面打包实现

修改入口

  //入口
    entry: {
        home:'./src/js/home.js',  
        login:'./src/js/login.js',  
        register:'./src/js/register.js', 
    },

1
2
3
4
5
6

修改html的plugin

  new HtmlWebpackPlugin({   //配置html打包的插件
            template: './src/page/home.html',         //以哪个html文件作为打包的模板
            filename:'home.html',
            chunks:['home']                        //该html文件使用了哪些入口js文件
        }),
        new HtmlWebpackPlugin({   //配置html打包的插件
            template: './src/page/login.html',         //以哪个html文件作为打包的模板
            filename:'login.html',
            chunks:['login']
        }),
        new HtmlWebpackPlugin({   //配置html打包的插件
            template: './src/page/register.html',         //以哪个html文件作为打包的模板
            filename:'register.html',
            chunks:['register']
        }),

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

修改出口中的js文件名为动态获取

   //出口
    output: {
        path: path.resolve(__dirname, 'dist'),   /
        filename: 'js/[name]-[hash:10].js',         //资源打包完成之后生成的js文件     
        publicPath: './'                
    },

1
2
3
4
5
6

修改css插件中的文件名为动态获取

    new MiniCssExtractPlugin({
            filename: 'css/[name]-[hash:10].css' // 输出到css文件夹里
        }),

1
2
3

# 2.2多页面打包—公共样式/js引入

在入口的最前面加上引入的公共js文件

修改html的plugin 的 chunks

 //入口
    entry: {
        common:'./src/js/common.js', //公共样式/js 一定写在入口的最前面

        home:'./src/js/home.js',  
        login:'./src/js/login.js',  
        register:'./src/js/register.js', 

    },

1
2
3
4
5
6
7
8
9

   new HtmlWebpackPlugin({   //配置html打包的插件
            template: './src/page/home.html',         //以哪个html文件作为打包的模板
            filename:'home.html',
            chunks:['home','common']                        //该html文件使用了哪些入口js文件
        }),
        new HtmlWebpackPlugin({   //配置html打包的插件
            template: './src/page/login.html',         //以哪个html文件作为打包的模板
            filename:'login.html',
            chunks:['login','common']
        }),
        new HtmlWebpackPlugin({   //配置html打包的插件
            template: './src/page/register.html',         //以哪个html文件作为打包的模板
            filename:'register.html',
            chunks:['register','common']
        }),

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

# 2.多页面应用打包-优化

# 2.1 自动清除dist

安装插件 clean-webpack-plugin

引入并配置插件

yarn add clean-webpack-plugin@4.0.0-alpha.0 -D

//自动清除dist 
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
//plugin 添加
new CleanWebpackPlugin()

1
2
3
4

# 2.2 css兼容性处理 postcss

可以自动生成css的兼容性代码，自动兼容版本较低的浏览器

下载loader 及插件 postcss-loader postcss-preset-env
修改css loader 配置
修改package.json 文件

新增postcss.config,js

yarn add postcss-loader@5.2.0 postcss-preset-env@6.7.0 -D

webakc.config.js 修改loader

{
                test: /\.css$/,        
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                      publicPath: '../'
                    }
                },'css-loader','postcss-loader']
            },
          {
                test: /\.less$/, //配置less处理器
              use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                      publicPath: '../'
                    }
                }, 'css-loader', 'postcss-loader','less-loader']
            },

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

修改package.josn文件

"browserslist": {
  "development": [
      "last 1 chrome version",
    "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.1%"
    ]
  }

1
2
3
4
5
6
7
8
9
10

新增postcss.config.js

//根目录新增的postcss.config.js
module.exports = {
    plugins: [
        // postcss插件
        require('postcss-preset-env')()
    ]
}

1
2
3
4
5
6
7

# 3.webpack总结

# 3.1 完整的项目目录结构

fitness-app
├── src
│   ├── css
│   │   ├── common.less
│   │   ├── home.less
│   │   ├── login.less
│   │   └── register.less
│   ├── fonts
│   │   ├── iconfont.css
│   │   ├── iconfont.eot
│   │   ├── iconfont.svg
│   │   ├── iconfont.ttf
│   │   ├── iconfont.woff
│   │   └── iconfont.woff2
│   ├── img
│   │   ├── hg.jpg
│   │   ├── lyf.jpg
│   │   └── zxy.jpg
│   ├── js
│   │   ├── common.js
│   │   ├── home.js
│   │   ├── login.js
│   │   └── register.js
│   └── page
│       ├── home.html
│       ├── login.html
│       └── register.html
├── .babelrc
├── package.json
├── postcss.config.js
├── webpack.config.js
└── yarn.lock

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

# 3.2 完整配置文件

# 3.2.1 webpack.config.js

/**
 * webpack.config.js 打包配置文件
 */

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')


module.exports = {
    entry: {
        common:'./src/js/common.js', 
        home:'./src/js/home.js',  
        login:'./src/js/login.js',  
        register:'./src/js/register.js', 
    },
    output: {
        path: path.resolve(__dirname, 'dist'),   
        filename: 'js/[name]-[hash].js',         
        publicPath: './'             
    },
    module: {
        rules: [
            {
                test: /\.css$/,        
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                      publicPath: '../'
                    }
                },'css-loader','postcss-loader']
            },
            {
                test: /\.less$/, //配置less处理器
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                      publicPath: '../'
                    }
                }, 'css-loader', 'postcss-loader','less-loader']
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader',     
                options: {
                    name: '[hash].[ext]',  
                    limit: 30 * 1024, 
                    esModule: false,  
                    outputPath:'img'
                },
            },
            {
                test: /\.html$/,    
                loader: 'html-loader'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/, 
                loader: 'file-loader',
                options:{
                    outputPath:'fonts'  
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',    
                exclude: /node_modules/, 
            }

        ]
    },
    plugins: [
        new HtmlWebpackPlugin({   
            template: './src/page/home.html',         
            filename:'home.html',
            chunks:['home','common']                     
        }),
        new HtmlWebpackPlugin({   
            template: './src/page/login.html',      
            filename:'login.html',
            chunks:['login','common']
        }),
        new HtmlWebpackPlugin({   
            template: './src/page/register.html',      
            filename:'register.html',
            chunks:['register','common']
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name]-[hash].css' 
        }),
        new OptimizeCssAssetsWebpackPlugin(),
        new CleanWebpackPlugin()

    ],
    mode: process.env.NODE_ENV,
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        compress: true, 
        port: 8080, 
        open: true, 
        publicPath: '/',
        openPage: 'home.html',
    },
    target: 'web', 
}

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

# 3.2.2 package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "clean-webpack-plugin": "4.0.0-alpha.0",
    "cross-env": "7.0.3",
    "css-loader": "5.2.0",
    "file-loader": "6.2.0",
    "html-loader": "1.3.2",
    "html-webpack-plugin": "5.0.0-beta.1",
    "less": "4.1.1",
    "less-loader": "8.0.0",
    "mini-css-extract-plugin": "1.4.1",
    "optimize-css-assets-webpack-plugin": "5.0.4",
    "postcss-loader": "5.2.0",
    "postcss-preset-env": "6.7.0",
    "style-loader": "2.0.0",
    "url-loader": "4.1.1",
    "webpack": "5.11.0",
    "webpack-cli": "4.10.0",
    "webpack-dev-server": "3.11.2"
  },
  "scripts": {
    "serve": "cross-env NODE_ENV=development webpack serve",
    "build": "cross-env NODE_ENV=production webpack"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.1%"
    ]
  }
}

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

# 3.2.3 .babelrc

{
    "presets": [
        "es2015"
    ]
}

1
2
3
4
5

# 3.2.4 postcss.config.js

module.exports = {
    plugins: [
        require('postcss-preset-env')()
    ]
}

1
2
3
4
5

编辑

上次更新: 2022/09/20, 00:36:06

← webpack单页应用打包高阶-作用域函数闭包→