survivejs教程链接
代码：survivejs-webpack

一、功能性

1. css处理

  • 处理样式中的import
1
2
3
4
5

options: {
	// 处理@import "./variables.sass";
	importLoaders: 1
}
  • 提取css
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
exports.extractCSS = ({
        include,
        exclude,
        use = []
    }) => {
    // Output extracted CSS to a file
    const plugin = new MiniCssExtractPlugin({
        // filename: '[name].css'
        filename: '[name].[contenthash:4].css'

    });

    return {
        module: {
            rules: [
                {
                    test: /\.css$/,
                    include,
                    exclude,

                    use: [
                        MiniCssExtractPlugin.loader
                    ].concat(use)
                }
            ]
        },
        plugins: [plugin]
    };
};
  • purifyCSS精简
    将不需要的css剔除；
1
2
3
4
5
6
// 精简css
exports.purifyCSS = ({paths}) => ({
    plugins: [new PurifyCSSPlugin({
        paths
    })]
});
  • 自动补齐
1
2
3
4
5
6
exports.autoprefix = () => ({
    loader: 'postcss-loader',
    options: {
        plugins: () => [require('autoprefixer')()]
    }
});
  • 使用

自动补齐添加.browserslistrc文件

1
2
3
4
5
6
7
8
9
10
parts.extractCSS({
    // use: 'css-loader'
    use: ['css-loader', parts.autoprefix()]

}),
parts.purifyCSS({
    paths: glob.sync(`${PATHS.app}/**/*.js`, {
        nodir: true
    })
}),

2. 图片处理

  • url-loader:可以设置limit，和name;

3. js处理

加.env文件；
如果有按需加载的import语法，需要
"plugins": ["syntax-dynamic-import"]

4. 单个html

1
2
3
4
5
6
7
{
    plugins:[
        new HtmlWebpackPlugin({
            title: 'Webpack demo'
        })
    ]
}

5. 多页处理

需要多个entry；需要output.publicPath;页面可通过chunks复用公共资源

定义：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
exports.page = ({
        path = '',
        template = require.resolve(
            'html-webpack-plugin/default_index.ejs'
        ),
        title,
        entry,
        chunks = []
    } = {}) => ({
    // 入口
    entry,

    plugins: [
        new HtmlWebpackPlugin({
            chunks,
            filename: `${path && path + '/'}index.html`,
            template,
            title
        })
    ]
});

使用：

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
{
    output: {
        // Needed for code splitting to work in nested paths
        publicPath: '/'
    }
},
    
const pages = [
    parts.page({
        title: 'Webpack demo',
        entry: {
            app: PATHS.app
        },
        chunks: ['app', 'manifest', 'vendor']

    }),
    parts.page({
        title: 'Another demo',
        path: 'another',
        entry: {
            another: path.join(PATHS.app, 'another.js')
        },
        // 没用到，页面也引用了
        chunks: ['another','vendor','manifest']
        // chunks: ['another', 'manifest', 'vendor']

    })
];

return merge([commonConfig, config, {
    mode
}].concat(pages));

6. 清理功能

1
2
3
exports.clean = path => ({
    plugins: [new CleanWebpackPlugin([path])]
});

7. 添加版本信息

1
2
3
4
5
6
7
exports.attachRevision = () => ({
    plugins: [
        new webpack.BannerPlugin({
            banner: new GitRevisionPlugin().version()
        })
    ]
});

二、代码分割+懒加载+tree-shaking

  • 默认自带tree-shaking功能，可以去掉不需要的代码

  • vendor打包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    optimization: {
        splitChunks: {
            // 分组打包ok
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'initial'
                }
            }
        }
    }
},
  • 按需加载,常用在路由当中
1
import ("./lazy").then

三、其他优秀

compose的模式

将定义与配置分离；

webpack.config.js
webpack.parts.js

构建分析

产出，然后有许多可视化工具分析

1
"build:stats": "webpack --env production --profile --json > stats.json"