webpack happypack 多线程打包, 当工程比较大的时候可以使用多线程打包
操作步骤:
1, 安装 happypack 插件
yarn add happypack
2, 配置
- // 导入多线程打包
- let Happypack = require('happypack')
- //
- module.exports = {
- plugins: [
- // JS 声明多线程打包
- new Happypack({
- id: 'js',
- use: [
- {
- loader: 'babel-loader',
- options: {
- presets: [
- '@babel/preset-env',
- '@babel/preset-react'
- ]
- }
- }
- ]
- }),
- //CSS 多线程打包
- new Happypack({
- id: 'css',
- use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
- })
- ],
- module: {
- // loader
- rules: [
- {
- test: /\.CSS$/, // 匹配 CSS 文件
- use: 'Happypack/loader?id=css'
- },
- {
- test: /\.Less$/, // 匹配 Less 文件
- use: 'Happypack/loader?id=css'
- },
- {
- test: /\.JS$/, // 匹配 JS 文件
- use: 'Happypack/loader?id=js'
- }
- ]
- }
- }
完整案例:
build/webpack.base.config.JS
- // 开发和生成模式共同的配置
- let path = require('path');
- // path.resolve 相对路径转成绝对路径
- // console.log(path.resolve('dist'));
- // 以当前目录
- // console.log(__dirname);
- // html-webpack-plugins 插件
- let HtmlWebpackPlugins = require('html-webpack-plugin');
- //
- let MiniCssExtractPlugin = require('mini-css-extract-plugin');
- //
- let webpack = require('webpack');
- // 导入多线程打包
- let Happypack = require('happypack')
- // webpack 相关配置
- module.exports = {
- // 入口, 表示从哪里开始打包
- entry: {
- home: './src/index.js'
- },
- // 表示出口 (输出后文件相关配置)
- output: {
- // 打包后的文件名 多入口根据入口名称生成
- filename: 'build.js',
- // 输出后的路径 (必须是一个绝对路径)
- path: path.resolve(__dirname, '../dist')
- },
- // 插件配置
- plugins: [
- new HtmlWebpackPlugins({
- // 模板位置
- template: 'index.html',
- // 文件名
- filename: 'index.html'
- }),
- // 抽离 CSS 为单独文件
- new MiniCssExtractPlugin({
- filename: 'main.css'
- }),
- // JS 声明多线程打包
- new Happypack({
- id: 'js',
- use: [
- {
- loader: 'babel-loader',
- options: {
- presets: [
- '@babel/preset-env',
- '@babel/preset-react'
- ]
- }
- }
- ]
- }),
- //CSS 多线程打包
- new Happypack({
- id: 'css',
- use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
- })
- ],
- //
- resolve: {
- // 解析三方库文件
- //modules: [ path.resolve('node_modules') ],
- // 扩展名
- extensions: ['.js', '.css', '.json', '.vue'],
- // 定义路径别名
- alias: {
- '@': path.resolve('src')
- }
- },
- module: {
- // loader
- rules: [
- {
- test: /\.CSS$/, // 匹配 CSS 文件
- use: 'Happypack/loader?id=css'
- },
- {
- test: /\.Less$/, // 匹配 Less 文件
- use: 'Happypack/loader?id=css'
- },
- {
- test: /\.JS$/, // 匹配 JS 文件
- use: 'Happypack/loader?id=js'
- }
- ]
- }
- }
来源: http://www.jianshu.com/p/e0f9a212e8d3