webpack系列从零搭建 webpack4+react 脚手架

Posted 2021-02-01 nianzhilian

经过三个章节的学习，你已经学会搭建了一个基于webpack4的react脚手架。如果要更改配置，比如，你希望把编译后的js文件和css文件等单独放dist下的static目录下，你想想，是不是有点麻烦。你要去浏览webpack的配置文件，找到哪些配置项，然后去更改它，我们希望有个参数配置文件，只要更改参数配置，而无需更改webpack的配置文件。

1 添加参数配置文件

（1）在根目录创建config文件夹，在config文件夹内新建一个index.js文件，文件内容如下：

    ‘use strict‘

    const path = require(‘path‘)

    module.exports = {
        dev: {
            assetsSubDirectory: ‘static‘,
            assetsPublicPath: ‘/‘,
        },
        build: {
            assetsRoot: path.resolve(__dirname, ‘../dist‘),
            assetsSubDirectory: ‘static‘,
            assetsPublicPath: ‘/‘,
        }
    }

我们定义了一部分配置参数，顾名思义，dev属性下的参数配置是针对开发环境，build属性下的参数配置是针对生产环境的。其中，assetsRoot是编译后的文件存放根路径，assetsSubDirectory是资源文件编译后存放的文件夹名称，assetsPublicPath是公共的路径。

（2）修改webpack.base.conf.js,如下

    const path = require(‘path‘);
    const config=require(‘../config‘);
    const APP_PATH = path.resolve(__dirname, ‘../app‘);

    module.exports = {
        entry: {
            app: ‘./app/index.js‘,
            framework: [‘react‘, ‘react-dom‘],
        },
        output: {
            path: config.build.assetsRoot,
            filename: ‘[name].js‘,
            publicPath: process.env.NODE_ENV === ‘production‘
              ? config.build.assetsPublicPath
              : config.dev.assetsPublicPath
          },
        module: {
            rules: [
                {
                    test: /.js?$/,
                    use: "babel-loader",
                    include: APP_PATH
                }
            ]
        }
    };

注意：我们在webpack.base.conf.js内配置了filename，那么dev环境下默认使用该配置，可以删除webpack.dev.conf.js内关于output的配置。

（3）路径生成方法：

路径的配置需要由assetsPublicPath和assetsSubDirectory以及具体的子路径组成，我们写一个公共的方法来生成路径。无论是开发环境还是生产环境，我们都可以复用该方法。我们在build文件夹下建立一个utils.js文件。内容如下：

    const path = require(‘path‘)
    const config = require(‘../config‘)

    exports.assetsPath = function (_path) {
        const assetsSubDirectory = process.env.NODE_ENV === ‘production‘
            ? config.build.assetsSubDirectory
            : config.dev.assetsSubDirectory

        return path.posix.join(assetsSubDirectory, _path)
    }

（4）修改webpack.prod.conf.js

在webpack.prod.conf.js页面头部引入

    const config=require(‘../config‘);
    const utils=require(‘./utils‘);

修改output属性的内容

     output: {
            path: config.build.assetsRoot,
            filename: utils.assetsPath(‘js/[name].[chunkhash:16].js‘),
            chunkFilename: utils.assetsPath(‘js/[id].[chunkhash].js‘)
        },

修改plugins内的相关配置：

    new CleanWebpackPlugin([config.build.assetsRoot], { allowExternal: true }),

    //导出css 
    new MiniCssExtractPlugin({
        filename: utils.assetsPath(‘css/[name].[hash].css‘),
        chunkFilename: utils.assetsPath(‘css/[id].[hash].css‘),
    }),

（5）执行编译命令查看

npm run build

查看编译后的文件是否放在static目录下了。你可以修改参数配置文件，然后试试看吧。

 

2 更多的配置化

 

接下去我们会把更多的参数和变量进行配置化。

（1）index.html HTML模板的位置

在config.js文件的dev和build参数下都配置index属性：

index: path.resolve(__dirname, ‘../public/index.html‘),

修改HtmlWebpackPlugin内template的值：
webpack.prod.conf.js的相关修改:

     new HtmlWebpackPlugin({
                template: config.build.index,
                inject: ‘body‘,
                minify: {
                    removeComments: true,
                    collapseWhitespace: true,
                    removeAttributeQuotes: true
                },
            }),

webpack.dev.conf.js的相关修改:

    new HtmlWebpackPlugin({
            template: config.dev.index,
            inject: true
    }),

（2）增加devServer 的配置

dev环境下，启动的端口号，代理相关，以及是否自动打开浏览器等等推荐可以放在参数配置文件内。
在config.js文件内增加相关配置参数：

    proxyTable: {},
    host: ‘localhost‘,
    port: 8080, 
    autoOpenBrowser: true,

修改webpack.dev.conf.js内的相关配置：

     devServer: {
            host: config.dev.host,
            port: config.dev.port,
            contentBase: path.join(__dirname, ‘../public‘),
            compress: true,
            historyApiFallback: true,
            hot: true,
            https: false,
            noInfo: true,
            open: config.dev.autoOpenBrowser,
            proxy: config.dev.proxyTable,
    }

 

更多的css loader加载器

 

我们在loader中配置了less加载器，如果我们要支持其他呢，比如sass，scss等等，显然，我们需要在rules数组增加配置。其实，这里可以写成公共的生成方法。并且我们把部分参数变成可配置。比如：是否开启cssModule等。

（1）前期准备，增加部分参数配置

修改config.js内的配置:

    const path = require(‘path‘)

    module.exports = {
        base: {
            // 是否开启cssModule
            cssModule: true,
            // cssModule排除的目录, 其他css库可以放这里
            cssModuleExcludePath: /public/
        },
        dev: {
            assetsSubDirectory: ‘static‘,
            assetsPublicPath: ‘/‘,

            index: path.resolve(__dirname, ‘../public/index.html‘),

            proxyTable: {},

            host: ‘localhost‘,
            port: 8080,
            autoOpenBrowser: true,
            // 是否生成sourceMap
            cssSourceMap: true,

        },
        build: {
            assetsRoot: path.resolve(__dirname, ‘../dist‘),
            assetsSubDirectory: ‘static‘,
            assetsPublicPath: ‘/‘,

            index: path.resolve(__dirname, ‘../public/index.html‘),

            // 是否生成sourceMap
            productionSourceMap: true,
        }
    }

(2) 在utils.js内增加cssLoaders和styleLoaders方法：

    exports.cssLoaders = function (options) {
        options = options || {}

        let cssLoader = {
            loader: ‘css-loader‘,
            options: {
                importLoaders: 1,
                sourceMap: options.sourceMap
            }
        }
        if (options.cssModule) {
            cssLoader.options.modules = true;
            cssLoader.options.localIdentName = ‘[local]__[hash:7]‘;
        }
        const postcssLoader = {
            loader: ‘postcss-loader‘,
            options: {
                sourceMap: options.sourceMap
            }
        }
        function generateLoaders(loader, loaderOptions) {
            const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

            if (loader) {
                loaders.push({
                    loader: loader + ‘-loader‘,
                    options: Object.assign({}, loaderOptions, {
                        sourceMap: options.sourceMap
                    })
                })
            }

            if (options.extract) {
                return [MiniCssExtractPlugin.loader].concat(loaders)
            } else {
                return [‘style-loader‘].concat(loaders)
            }
        }

        return {
            css: generateLoaders(),
            postcss: generateLoaders(),
            less: generateLoaders(‘less‘, { javascriptEnabled: true, indentedSyntax: true }),
            sass: generateLoaders(‘sass‘, { indentedSyntax: true }),
            scss: generateLoaders(‘sass‘),
            stylus: generateLoaders(‘stylus‘),
            styl: generateLoaders(‘stylus‘)
        }
    }

    exports.styleLoaders = function (options) {
        let output = []
        const loaders = exports.cssLoaders(options)
        for (const extension in loaders) {
            const loader = loaders[extension]
            let loaderObj = {
                test: new RegExp(‘\.‘ + extension + ‘$‘),
                use: loader,
            }
            if (options.cssModule) {
                loaderObj.exclude = options.cssModuleExcludePath;
            }
            output.push(loaderObj)
        }

        if (options.cssModule) {
            options.cssModule = false
            const cssModuleLoaders = exports.cssLoaders(options)
            for (const extension in cssModuleLoaders) {
                const cssModuleLoader = cssModuleLoaders[extension]
                let cssModuleLoaderObj = {
                    test: new RegExp(‘\.‘ + extension + ‘$‘),
                    use: cssModuleLoader,
                }
                cssModuleLoaderObj.include = options.cssModuleExcludePath;
                output.push(cssModuleLoaderObj)
            }
        }
        return output
    }

(3) 在webpack.prod.conf.js内使用

确认是否引入了utils，如果没有引入，在页面上方增加代码：

const utils=require(‘./utils‘);

修改 module内的rules属性：

    rules: utils.styleLoaders({
            sourceMap: config.build.productionSourceMap,
            extract: true,
            usePostCSS: true,
            cssModule:config.base.cssModule,
            cssModuleExcludePath:config.base.cssModuleExcludePath
    })

执行编译查看：

npm run build

(4) 在webpack.dev.conf.js内使用

确认是否引入了utils，如果没有引入，在页面上方增加代码：

const utils=require(‘./utils‘);

修改 module内的rules属性：

     rules: utils.styleLoaders({ 
            sourceMap: config.dev.cssSourceMap, 
            usePostCSS: true,
            cssModule:config.base.cssModule,
            cssModuleExcludePath:config.base.cssModuleExcludePath
    })

执行dev命令试试看

npm run dev

下一节会对 如果对编译后的文件进行gzip压缩，如何让开发环境的控制台输出更加高逼格，如何更好的对编译后的文件进行bundle分析等问题展开讨论。