webpack统一配置

98 阅读2分钟

是不是还在为webpack这种没有开箱即用的工具感到烦恼?

每次都需是繁琐的配置!!!

当然我们也可以选择像vue-cli,create-react-app这样的优秀脚手架来搭建自己的项目。

但是因为每个公司的业务不一样,有时候这些开源的脚手架往往不能满足我们所需的业务性功能拓展。

所以我就编写了基于webpack相关的项目配置,你可以基于其基础上搭建属于自己的脚手架,当然也可以直接使用它来搭建项目!

所有源码:github.com/Dilomen/web…

使用

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配置的修改

需要在根目录(或指定的路径下)下建一个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/')
  }
}

欢迎大家一起参与项目的建设!!!