一个帮助你快速搭建 webpack 环境的工具~
npm install -g webpack-settingyarn global add webpack-setting可以直接使用指令执行对应的文件，无需再次安装项目环境
serein run -e ./index.js可通过-h 参数参看
| 简写 | 全称 | 作用 |
|---|---|---|
| -V | --version | 版本号 |
| -f | --framework <framework> | 选择的框架 react | vue |
| -e | --entry <file> | 入口文件路径 |
| -c | --config <path> <framework> | serein.config.js 文件路径 |
| -ts | --typescript | 是否支持 ts |
serein run -e ./index.jsserein depserein dep vueserein install vueserein install vue --save-devnpm install webpack-settingyarn add webpack-setting"scripts": {
"start": "npm run dev",
"dev": "serein run",
"build": "serein build"
}"dev": "serein run -c ./config/serein.config.js",
"build": "serein build -c ./config/serein.config.js"为了降低学习成本，及更改配置项的灵活性，将采用 webpack-chain 插件，可以以以下两种方式进行 webpack 配置的修改
- 直接对象 merge 覆盖
- 使用webpack-chain的方式
需要在根目录下建一个 serein.config.js 的文件
chainWebpack > configureWebpack，即 chainWebpack 在 configureWebpack 之后执行
module.exports = {
CDNJS: [], // 支持对CDN的加入，不要在根目录建html文件，即可自动化生成带有CDN的html文件
CDNCSS: [],
config: {
framework: 'react', // default: react 暂只支持 react | vue
ts: false, // default: false
css: ['less', 'scss'], // default: [] 暂只支持 less | scss
},
// 直接返回一个webpack配置对象，该对象会和已有的对象进行合并
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
return {};
} else {
return {};
}
},
// 对已有配置通过webpack-chain的规则进行修改
chainWebpack: (config) => {
config.resolve.alias.set('src', './src/');
},
};如果使用配置中的 CDN 引入，请不要在根目录下建 html 文件（该项目会根据你的配置生成 html 文件），然后你就可以在开发中直接使用 CDN 的相关内容，不需要再引入 npm 包，从而大大减少项目的体积