本来想要做一个大型项目的 webpack 教程，但是我发现还可以做更多的事情，所以这里我要将这个项目做成 webpack 手册，您可以来这里找到任何想要的 webpack 配置
本文从下面几个课题来实现
点击关闭/打开所有课题
点击关闭/打开安装
npm i -g webpack-box # 全局安装使用
npm link # 建立软连接，可以使用 webpack-box 命令点击关闭/打开使用
webpack-box dev # 开发环境
webpack-box build # 生产环境
webpack-box dll # 编译差分包
webpack-box dev index # 指定页面编译（多页面）
webpack-box build index # 指定页面编译（多页面）
webpack-box build index --report # 开启打包分析
webpack-box build:ssr # 编译ssr
webpack-box ssr:server # 在 server 端运行
webpack-box lint eslint # 自动修复 eslint 错误
webpack-box lint tslint # 自动修复 tslint 错误
webpack-box lint stylelint # 自动修复 stylelint 错误
webpack-box upgrade 5 # 可以切换到 webpack5/4在 package.json 中使用
{
"scripts": {
"dev": "webpack-box dev",
"build": "webpack-box build",
"dll": "webpack-box dll",
"build:ssr": "webpack-box build:ssr",
"ssr:server": "webpack-box ssr:server"
}
}点击关闭/打开所有配置
点击关闭/打开扩展配置
在根目录下添加 `box.config.js`，即可配置使用box.config.js
const path = require('path')
function resolve (dir) {
return path.join(process.cwd(), dir)
}
module.exports = function (config) {
/**
* @param {object} dll 开启差分包
* @param {object} pages 多页面配置 通过 box run/build index 来使用
* @param {function} chainWebpack
* @param {string} entry 入口
* @param {string} output 出口
*
* @param {string} publicPath
* @param {string} port 端口
* @param {object} eslint eslint 配置
* @param {object} stylelint stylelint 配置
* @param {object} eslint eslint 配置
* @param {object} alias 配置别名
*/
return {
entry: 'src/main.js',
output: 'dist',
publicPath: '/common/',
port: 8888,
alias: {
'@': resolve('src'),
'@src': resolve('src')
},
eslint: {
lintOnSave: true, // 开启运行时检测
extensions: ['js', 'jsx', 'vue'] // 默认 ['js', 'jsx']
},
tslint: {
lintOnSave: true, // 开启运行时检测
useThreads: true
},
stylelint: {
lintOnSave: true // 开启运行时检测
// extensions: ['vue', 'htm', 'html', 'css', 'sss', 'less', 'scss']
},
// dll: {
// venders: ['react']
// },
pages: {
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html'
},
index2: {
entry: 'src/main.js',
template: 'public/index2.html',
filename: 'index2.html'
}
},
chainWebpack(config) {
}
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent