webpack高级配置

1.多入口

比如想要输入两个页面：index.html 和 other.html 两个文件分别引入index.js 和 other.js

• 配置entry输入入口配置项：

entry: {
        index: path.join(path.join(__dirname, '..', 'src'), 'index.js'),
        other: path.join(path.join(__dirname, '..', 'src'), 'other.js')
    },

• 配置outpath输出出口配置项：

output: {
        filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key
        path: path.join(__dirname, '..', 'dist'),
        // publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
    },

• 安装并引入html-webpack-plugin： npm install html-webpack-plugin;const HtmlWebpackPlugin = require('html-webpack-plugin')
• 配置plugins，针对每个入口生成对应的html文件，并使用chunks来规定只引用哪些js文件

plugins: [
        // 多入口 - 生成 index.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'index.html'),
            filename: 'index.html',
            // chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
            chunks: ['index']  // 只引用 index.js
        }),
        // 多入口 - 生成 other.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'other.html'),
            filename: 'other.html',
            chunks: ['other']  // 只引用 other.js
        })
    ]

2.抽离css文件

• 安装mini-css-extract-plugin： npm install mini-css-extract-plugin
• 引入：const MiniCssExtractPlugin = require('mini-css-extract-plugin')
• 配置rules项：

rules: [
            // 抽离 css
            {
                test: /\.css$/,
                loader: [
                    MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
                    'css-loader',
                    'postcss-loader'
                ]
            },
            // 抽离 less --> css
            {
                test: /\.less$/,
                loader: [
                    MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
                    'css-loader',
                    'less-loader',
                    'postcss-loader'
                ]
            }
        ]

• 配置plugins：

plugins: [
        // 抽离 css 文件
        new MiniCssExtractPlugin({
            filename: 'css/main.[contentHash:8].css'
        })
    ],

3.抽离公共代码 chunk

一般项目中，像node_modules跟公共的js代码块必须抽离出来。
涉及到plugins、optimization两个配置项。

• 在optimization配置项中，启用份额代码块splitChunks配置项：

optimization: {
        // 分割代码块
        splitChunks: {
            chunks: 'all',
            /**
             *  initial 入口 chunk，对于异步导入的文件不处理
                async 异步 chunk，只对异步导入的文件处理
                all 全部 chunk
             */

            // 缓存分组
            cacheGroups: {
                // 第三方模块
                vendor: {
                    name: 'vendor', // chunk 名称，最后会被打包成像vender.js文件
                    priority: 1, // 权限更高，优先抽离，重要！！！
                    test: /node_modules/,
                    minSize: 0,  // 大小限制，超过多大就会被打包成代码块
                    minChunks: 1  // 最少复用过几次，只要复用就被打包成代码块
                },

                // 公共的模块
                common: {
                    name: 'common', // chunk 名称
                    priority: 0, // 优先级
                    minSize: 0,  // 公共模块的大小限制
                    minChunks: 2  // 公共模块最少复用过几次，只要被复用连歌词以上就被打包成代码块
                }
            }
        }
    }

• 在plugins插件配置项中，配置哪些入口html文件需要引入哪些代码块：
  chunks 表示该页面要引用哪些 chunk （即entry以及抽离的chunk）

plugins: [
        // 多入口 - 生成 index.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'index.html'),
            filename: 'index.html',
            // chunks 表示该页面要引用哪些 chunk （即entry以及抽离的chunk）
            chunks: ['index', 'vendor', 'common']  // 要考虑代码分割
        }),
        // 多入口 - 生成 other.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'other.html'),
            filename: 'other.html',
            chunks: ['other', 'common']  // 考虑代码分割
        })
    ]

4.懒加载

不需要什么配置，ES6中import语法(当然webpack也支持)：
例如：

setTimeout(() => {
	//类似定义chunk
	import(js文件).then(res => {
		console.log(res.default.message);
	});
}, 500);

5.处理Vue、React

这个比较简单，没什么可以配置的。

• Vue处理：
  安装并使用vue-loader：
  npm install vue-loader

rules: [
	{
         test: /\.vue$/,
         loader: ['vue-loader'],
         include: path.join(__dirname, '..', 'src'),
         exclude: /node_modules/
     },
]

• React处理
  先安装@babel/preset-react ： npm install @babel/preset-react
  配置.babelrc文件：

{
    "presets": ["@babel/preset-react"],
    "plugins": []
}