是不是还在为webpack这种没有开箱即用的工具感到烦恼?
每次都需是繁琐的配置!!!
当然我们也可以选择像vue-cli,create-react-app这样的优秀脚手架来搭建自己的项目。
但是因为每个公司的业务不一样,有时候这些开源的脚手架往往不能满足我们所需的业务性功能拓展。
所以我就编写了基于webpack相关的项目配置,你可以基于其基础上搭建属于自己的脚手架,当然也可以直接使用它来搭建项目!
使用
1、只需要通过npm安装
npm install --save webpack-setting
或
yarn add webpack-setting
2、然后设置相关的运行scripts
"scripts": {
"start": "npm run dev",
"dev": "NODE_ENV=development mywebpack",
"build": "NODE_ENV=production mywebpack"
}
3、允许创建额外的配置项,可以通过指令来指定路径,如果没有特殊路径指定,那就是根目录下
"dev": "NODE_ENV=development mywebpack ./config/serein.config.js",
"build": "NODE_ENV=production mywebpack ./config/serein.config.js"
4、关于自定义配置
为了降低学习成本,及更改配置项的灵活性,将采用webpack-chain插件,可以以以下两种方式进行webpack配置的修改
- 直接对象merge覆盖
- 使用webpack-chain的方式 github.com/Yatoo2018/w…
需要在根目录(或指定的路径下)下建一个serein.config.js的文件
chainWebpack > configureWebpack,即chainWebpack在configureWebpack之后执行
同时可以选择framework来确定你的框架、ts是否采用TypeScript、以及选择使用到的CSS预处理器
(为了减小包的体积,相应的框架相关npm包需要根据提示自行下载)
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/')
}
}
欢迎大家一起参与项目的建设!!!