devserver配置_教你统一管理多项目 webpack 配置文件

作者：Lefex

转发链接：https://mp.weixin.qq.com/s/6J9X8s_QfQcv2g5Wr-qn-A

前言

对于一个 30+ 的前端团队来说，前端项目可能有 50+ 个，如果每个项目单独管理 webpack 配置文件(webpack.dev.js 这类文件)，如果遇到 webpack 升级、webpack 性能优化或其它因素时，修改 webpack 配置文件，需要耗费很大的人力。而且很难保证配置文件统一。

基于以上背景，我们来解决上面遇到的问题。

可以通过创建 npm 包让前端各个项目复用代码，我们可以把 webpack 的配置文件做成 npm 模块，这样就解决了上面遇到的问题，当创建新项目的时候，也不至于复制其它项目中 webpack 的配置文件，直接使用 npm 模块即可。这里我创建了三个 webpack 配置文件，配置文件中具体需要哪些内容，视自身项目而定：

1、创建 webpack.base.js

base 用来处理各个 webpack 文件中共用的配置，主要做下面这些事情：

1>、解析 ES6；

2>、解析 css 预处理，比如 less、scss、stylus；

3>、解析图片、字体；

4>、解析主要的开发框架，比如 Vue、React；

5>、多页面入口；

6>、output 定义；

7>、html 模板处理；

下面是一个简单的 base 配置：

/** * @file wepack.base.js * @author 素燕 */const path = require('path');const glob = require('glob');const fs = require('fs');const HtmlWebpackPlugin = require('html-webpack-plugin');const VueLoaderPlugin = require('vue-loader/lib/plugin');// 多页面处理const setupMutiPageApp = () => {    const entry = {};    const htmlPlugins = [];    const entryFiles = glob.sync(path.join(__dirname, './src/pages/*/index.js'));    Object.keys(entryFiles).map(index => {        const entryFile = entryFiles[index];        const match = entryFile.match(/src/pages/(.*)/index.js/);        const pageName = match && match[1];        entry[pageName] = entryFile;        let templatePath = path.join(__dirname, `./src/pages/${pageName}/index.html`);        // 如果不存在使用全局的模板        if (!fs.existsSync(templatePath)) {            templatePath = path.join(__dirname, './src/index.tpl.html');        }        // 创建 HTML Plugin        htmlPlugins.push(            new HtmlWebpackPlugin({                template: templatePath,                filename: `${pageName}.html`,                chunks: [pageName],                inject: true            })        );    });    return {        entry,        htmlPlugins    };};const {entry, htmlPlugins} = setupMutiPageApp();const files = {    rules: [        {            // ES6 -> ES5            test: /.js$/,            use: 'babel-loader'        },        {            // 处理CSS            test: /.css$/,            use: ['style-loader', 'css-loader']        },        {            // 处理 less            test: /.less$/,            use: ['style-loader', 'css-loader', 'less-loader']        },        {            // vue 文件采用 vue-loader 来处理            test: /.vue$/,            use: ['vue-loader']        },        {            // 处理图片            test: /.(png|jpg|gif|jpeg)$/,            use: [                {                    loader: 'url-loader',                    options: {                        limit: 10240                    }                }            ]        },        {            // 字体处理            test: /.(woff|woff2|eot|ttf|otf)$/,            use: 'file-loader'        }    ]};module.exports = {    entry: entry,    output: {        filename: '[name].js',        path: path.join(__dirname, 'dist')    },    module: files,    plugins: [        new VueLoaderPlugin()    ].concat(htmlPlugins)};

2、创建 webpack.dev.js

这个配置文件主要为线下环境打包，方便开发与调试。这里涉及到 base 和 dev 文件中的配置进行合并，可以使用 webpack-merge 进行合并。

/** * @file wepack.dev.js * @author 素燕 */const path = require('path');const baseConf = require('./webpack.base');const merge = require('webpack-merge');const {CleanWebpackPlugin} = require('clean-webpack-plugin');const devConf = {    mode: 'development',    devtool: 'inline-source-map',    devServer: {        contentBase: './dist',        port: 9000,        hot: true,        stats: 'errors-only'    },    plugins: [        new CleanWebpackPlugin()    ]};// 把 base 与 dev 进行合并const retConf = merge(baseConf, devConf);module.exports = retConf;

3、创建 webpack.prod.js

这个配置文件主要为线上环境打包，包含文件压缩、文件指纹等、代码优化。

/** * @file wepack.prod.js * @author 素燕 */const baseConf = require('./webpack.base');const merge = require('webpack-merge');const prodConf = {    mode: 'production'};const retConf = merge(baseConf, prodConf);module.exports = retConf;

以上就是一个基本的配置，我新建了一个项目，为了能够让 webpack 配置文件应用于所有的项目，需要对配置文件进行模块化。

添加 npm script：

"scripts": {  "dev": "webpack --config ./webpack.dev.js",   "dev:start": "webpack-dev-server --open",   "build": "webpack --config ./webpack.prod.js"}

在项目根目录下执行 npm run dev 进行打包：

打包结束后，打开 dist/home.html，效果如下：

现在是直接把 webpack 配置文件放到了项目中，我们需要把这些配置文件打包成一个 npm 模块，这部分内容比较简单，读者可自行打包 npm 模块。

大家加油！

作者：Lefex

转发链接：https://mp.weixin.qq.com/s/6J9X8s_QfQcv2g5Wr-qn-A