xm-webpack-config/index.js

/**
 * Created by zuozhuo on 16/9/6.
 */
"use strict";
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const InlineChunkWebpackPlugin = require('html-webpack-inline-chunk-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
// 因为1.x的webpack每次编译时，如果app模块内的代码改动比较大，整个module id都会变，导致vendor也变了
const WebpackStableModuleIdAndHash = require('webpack-stable-module-id-and-hash');
const GitRevisionPlugin = require('git-revision-webpack-plugin');
const ChunkLoadingEventPlugin = require('./ChunkLoadingEventPlugin.js');
const dateFns = require('date-fns');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');


const gitRevisionPlugin = new GitRevisionPlugin();
const lessExtract = new ExtractTextPlugin('less.[contenthash].css');
const scssExtract = new ExtractTextPlugin('scss.[contenthash].css');
const cssExtract = new ExtractTextPlugin('css.[contenthash].css');
const cssModulesExtract = new ExtractTextPlugin('css-modules.[contenthash].css', {
    // css modules中的css必须加这个才能extract出来
    allChunks: true
});

const BROWSERS_LIST = [
    'ie >= 8',
    'ie_mob >= 10',
    'ff >= 30',
    'chrome >= 34',
    'safari >= 7',
    'opera >= 23',
    'ios >= 7',
    'android >= 2.3',
    'bb >= 10'
];
const MY_AUTO_PREFIXER = autoprefixer({
    browsers: BROWSERS_LIST
});
// https://www.npmjs.com/package/postcss-pxtorem#options
const MY_PX_TO_REM = pxtorem({
    rootValue: 16,
    unitPrecision: 5,
    selectorBlackList: [/^body$/, /^html$/, /^\.xm-footbar$/, /^\.xm-navbar$/], // 不进行转换的选择器
    propList: ['*'],
    replace: true,
    mediaQuery: false,
    minPixelValue: 0
});


/*
 - createLoader支持 -autoprefixer删除
 - joinLoaders
 - allLoaders
 - allLoaderPacks
 - 将所有loaders分离到外部文件夹
 */
function createLoader(loaderName, option) {
    if (option)
        return `${loaderName}?${JSON.stringify(option)}`;
    else
        return loaderName;
}

// built-in
const PRESET_LOADERS = {
    postCssLoader: (function () {

        return createLoader('postcss-loader', {
            sourceMap: true, // 只能设置 true | inline 不能设置false
            // plugins: [ ] // 这里不能使用plugin属性，请在后面的 postcss 属性配置
            // parser: 'postcss-scss' // 如果需要使用 precss，需要设置这个parser
        })

    })(),
    sassLoader: (function () {
        // 完整option请参考
        // https://github.com/sass/node-sass#options
        const option = {
            // includePaths: [path.resolve(__dirname, "../src/sass")]
            // TODO 这里有依赖，后面考虑拆分
            includePaths: [path.join(process.cwd(), "src/sass")]
        };
        return createLoader(require.resolve('sass-loader'), option);
    })(),
    babelLoader: (function () {
        const options = {
            presets: [
                [
                    'es2015',
                    {loose: true}
                ],
                'react',
                'stage-0'
            ],
            plugins: [
                // 因为app.js里已经包含了 import './js/tool/polyfills' （包含 regenerator-runtime）
                // 'babel-plugin-transform-runtime', // 支持generator、promise、async、await
                "babel-plugin-dev-expression", // 替换 __DEV__  invariant warning
                "babel-plugin-add-module-exports", // 解决es6 export default问题
                'babel-plugin-transform-decorators-legacy',  // 支持装饰器
                "babel-plugin-transform-react-remove-prop-types", // 生产环境移除propTypes
                "babel-plugin-lodash", // 优化缩减lodash
                // 将所有文件里的新增的es6helper方法
                // (_inherits\_objectWithoutProperties\possibleConstructorReturn)提取到一个文件里，以便减少体积
                ["babel-plugin-transform-helper", {
                    helperFilename: '_babelEs6TempHelper_.js'
                }]
            ]
        };
        return createLoader(require.resolve('babel-loader'), options)
    })(),

};


// TODO
// - 增加sourcemap
const myCssModulesLoaders = [
    //'style-loader',
    /*
     localIdentName 代表输出的class名：
     - path 样式文件路径
     - name 样式文件名
     - local class名
     - hash 哈希码
     默认值为 "[hash:base64]"
     */
    'css-loader?-autoprefixer&modules&importLoaders=1&localIdentName=[path]--[name]-[ext]__[local]-[hash:base64:5]',
    PRESET_LOADERS.postCssLoader,
    'resolve-url-loader',
    PRESET_LOADERS.sassLoader,
];
const myCssModulesProductionLoaders = [
    //'style-loader', // 这个作用是将css生成<style>标签，而不是生成一个外部引用的css文件
    /*
     这里了有个非常大的坑，在webpack 1.x里有个bug，
     webpack.optimize.UglifyJsPlugin压缩时默认会对css进行 autoprefixer，
     会将所有vendor prefix按照他的逻辑去处理，那么很多样式在老版浏览器，例如iOS8会异常（例如flex无法工作）
     所以这里使用-autoprefixer取消css-loader自带的autoprefixer，手动将autoprefixer添加在后面的流程里
     参考： https://github.com/webpack/webpack/issues/2543
     */
    'css-loader?-autoprefixer&modules&importLoaders=1&localIdentName=[hash:base64]',
    PRESET_LOADERS.postCssLoader,
    'resolve-url-loader',
    PRESET_LOADERS.sassLoader,
];

function webpackConfigMaker(options) {

    const DEFAULT_OPTIONS = {
        https: false,
        sourceMap: false,
        debug: process.env.NODE_ENV !== 'production',
        appEntry: [],
        vendorEntry: [],
        commonChunks: [],
        publicPath: '/qn-dist/',
        distPath: path.join(process.cwd(), 'dist-prepare'), // 这里必须是绝对物理路径,否则编译会报错
        htmlTpl: 'src/index.html'
    };
    options = Object.assign(DEFAULT_OPTIONS, options);
    if (!path.isAbsolute(options.distPath)) {
        //  将distPath纠正为绝对物理路径，避免webpack报错
        options.distPath = path.join(process.cwd(), options.distPath);
    }
    const isProductionENV = !options.debug;
    const shouldBuildSourceMap = !isProductionENV || options.sourceMap;

    const HOST = '0.0.0.0';
    const PORT = process.env.PORT || 8080;
    const DEV_SERVER = `${options.https ? 'https' : 'http'}://${HOST}:${PORT}`;
    const DEFAULT_APP_ENTRY = isProductionENV ? [] : [
        `webpack-dev-server/client?${DEV_SERVER}`, // Automatic Refresh ，支持在浏览器console显示Refresh compile信息

        require.resolve('react-dev-utils/webpackHotDevClient'), // 使用增强的hotDevClient（带报错overlay）
        // "webpack/hot/dev-server", // 支持 hot reload + full page reload
        // // "webpack/hot/only-dev-server", // Hot Module Replacement 仅支持hot reload, full page reload会出warning
    ];

    const DEFAULT_VENDOR_ENTRY = [
        'babel-regenerator-runtime', // 为了支持ES7的async和await，以及不支持Promise的机器polyfill
    ];

    let config = {
        node: {
            // 避免某些npm包（例如browserslist）的代码中使用了node的fs模块，
            // 但是在浏览器环境中是没有fs模块的，导致浏览器中抛错
            console: true,
            fs: 'empty',
            net: 'empty',
            tls: 'empty',
        },
        debug: !isProductionENV,
        entry: {
            app: DEFAULT_APP_ENTRY.concat(options.appEntry),
            vendors: DEFAULT_VENDOR_ENTRY.concat(options.vendorEntry)
        },
        devServer: { // 传递给webpack-dev-server的配置
            // overlay: true // 增加报错浮层
        },
        output: {
            path: options.distPath,
            publicPath: options.publicPath,
            filename: '[name].[chunkhash].js',
            // 不能是 [name].[chunkhash].js.map 否则sourcemap会不正确
            // 因为sourcemap不仅仅是js，还有css的。 [file]就相当于前面的filename
            sourceMapFilename: "[file].map",
            chunkFilename: "chunk.[name].[id].[chunkhash].js"
        },
        resolveLoader: {
            alias: {
                // 新增一个复制功能的copy-loader别名
                'copy-loader': 'file-loader?name=[path][name].[ext]',
                'my-css-with-sourcemap-loader': `css-loader?-autoprefixer&sourceMap!${PRESET_LOADERS.postCssLoader}`,
                'my-css-loader': `css-loader?-autoprefixer!${PRESET_LOADERS.postCssLoader}`,
            }
        },
        // 提取到外部文件里去(postcss-plugins)
        // webpack1的postcss的plugin只能配在这里，不能和loader写在一起，因为所有plugin是函数，没法序列化
        postcss: () => {
            return [
                /* // 使用precss代替sass-loader编译scss（目前@import指令貌似有问题，暂时还是用sass-loader吧）
                 precss({
                 'import':{ //  postcss-partial-import的独立配置(namespace)
                 // path:[path.join(process.cwd(), "src/sass")],
                 extension:'.scss'
                 }
                 }),
                 */
                MY_AUTO_PREFIXER,
                // MY_PX_TO_REM, // 因为secretWork项目里有很多以px为单位的sprite图，自动转为rem会有问题，所以暂时不弄了
            ];
        },
        module: {
            //loader的处理顺序为从后往前
            loaders: [
                /*
                 {
                 test: function test(filePath) {
                 return (/\.less$/.test(filePath) && !/\.module\.less$/.test(filePath));
                 }
                 }
                 * */
                {
                    // 将require('xxxx.html')转为js内字符串变量
                    test: function (filePath) {
                        return (/\.html$/).test(filePath) && !(/\.external\.html$/).test(filePath);
                    },
                    loaders: [
                        createLoader(require.resolve('html-loader'), {
                            ignoreCustomFragments: [/\{\{.*?}}/],
                            minimize: false,//开启html压缩后貌似编译报错,而且编译非常慢
                            // root: path.resolve(__dirname, 'assets'),
                            // 需要处理的图片和js\css的md5戳
                            attrs: ['img:src', 'link:href', 'script:src']
                        }),
                        // createLoader('nunjucks-loader',{})
                    ]
                },
                {
                    // 将require('xxxx.external.html')
                    // ==> 转为字符串 (html-loader)
                    // ==> 转为外部文件 (extract-loader)
                    // ==> 转为md5形式的文件url (file-loader)
                    test: /\.external\.html$/,
                    loaders: [
                        createLoader(require.resolve('file-loader'), {
                            name: '[path][name].[hash:8].[ext]'
                        }),
                        createLoader(require.resolve('extract-loader')),
                        createLoader(require.resolve('html-loader'), {
                            ignoreCustomFragments: [/\{\{.*?}}/],
                            minimize: false,//开启html压缩后貌似编译报错,而且编译非常慢
                            // root: path.resolve(__dirname, 'assets'),
                            // 需要处理的图片和js\css的md5戳
                            attrs: ['img:src', 'link:href', 'script:src']
                        }),
                        // createLoader('nunjucks-loader',{})
                    ]
                },
                {
                    // Autoprefixer 必须要这个玩意，所以请加上，否则会报错
                    /*
                     Module parse failed: /Users/zuozhuo/workspace/secretWork/node_modules/caniuse-db/region-usage-json/AD.json Unexpected token (1:5)
                     You may need an appropriate loader to handle this file type.
                     SyntaxError: Unexpected token (1:5)
                     */
                    test: /\.json$/,
                    loaders: [
                        require.resolve("json-loader"),
                    ],
                },
                {
                    test: /\.js$/,
                    exclude: [
                        // 排除非node_modules/xmui的node_modules
                        // /node_modules\/(?!xmui)/
                        /node_modules/
                    ],
                    // include: [],
                    loaders: (function () {
                        let _loaders = [
                            PRESET_LOADERS.babelLoader
                        ];
                        // 开发环境增加hot-loader
                        if (!isProductionENV) {
                            // isProductionENV ? require.resolve('do-nothing-loader') : require.resolve('react-hot-loader'),
                            // 貌似 do-nothing-loader 会导致 es6 的sourcemap丢失
                            _loaders.unshift(require.resolve('react-hot-loader'));
                        }
                        return _loaders;
                    })(),
                },
                {
                    test: /\.less$/,
                    // 将css从js里分离出来,并行下载加快渲染速度(并支持sourceMap)
                    loader: lessExtract.extract(
                        shouldBuildSourceMap
                            ? `my-css-with-sourcemap-loader!less-loader?sourceMap`
                            : `my-css-loader!less-loader`
                    )
                },
                // 使用sass-loader来编译scss
                {
                    test: function (filePath) {
                        return (/\.scss$/).test(filePath) && !(/\.module\.scss$/).test(filePath);
                    },
                    loader: scssExtract.extract(
                        shouldBuildSourceMap
                            // 解决url(../)相对路径问题，不过貌似sourcemap就失效了
                            // // !resolve-url-loader!sass-loader?sourceMap
                            ? `my-css-with-sourcemap-loader!resolve-url-loader?sourceMap!sass-loader?sourceMap`
                            : `my-css-loader!resolve-url-loader!sass-loader`
                    )
                },
                // 使用postcss来编译scss（暂时有问题）
                {
                    test: function (filePath) {
                        return false;
                        // return (/\.scss$/).test(filePath) && !(/\.module\.scss$/).test(filePath);
                    },
                    loader: scssExtract.extract(
                        shouldBuildSourceMap
                            // 解决url(../)相对路径问题，不过貌似sourcemap就失效了
                            // // !resolve-url-loader!sass-loader?sourceMap
                            ? `my-css-with-sourcemap-loader`
                            : `my-css-loader`
                    )
                },
                {
                    test: /\.(scss-m|module\.scss)$/,
                    loader: cssModulesExtract.extract(
                        isProductionENV
                            ? myCssModulesProductionLoaders.join('!')
                            : myCssModulesLoaders.join('!')
                    ),
                    // loader: cssModulesExtract.extract(
                    //     myCssModulesLoaders.join('!')
                    // )
                    // loaders: myCssModulesLoaders
                },
                {
                    test: /\.css$/,
                    loader: cssExtract.extract(
                        shouldBuildSourceMap
                            ? `my-css-with-sourcemap-loader`
                            : `my-css-loader`
                    )
                },
                {
                    // 如果图片小于1000(1kb),自动转为base64内嵌,否则生成[path][name].[hash:8].[ext]外部文件
                    // url-loader已经包含了file-loader的功能,请不要另外再使用file-loader
                    test: /\.(png|jpe?g|ico|otf|gif|svg|woff|ttf|eot)$/,
                    loaders: [
                        createLoader(require.resolve('url-loader'), {
                            limit: 1000,
                            name: '[path][name].[hash:8].[ext]'
                        })
                    ]
                }
            ]
        },
        plugins: [
            // 修改chunk加载事件，便于做loading指示器等
            new ChunkLoadingEventPlugin(),

            // yarn add circular-dependency-plugin
            new CircularDependencyPlugin({
                // exclude detection of files based on a RegExp
                exclude: /node_modules/, // /a\.js|node_modules/
                // add errors to webpack instead of warnings
                failOnError: false
            }),

            // 提取公共模块部分代码为独立chunk文件
            new webpack.optimize.CommonsChunkPlugin({
                names: [
                    'vendors', // 这里对应的就是entry里的 vendors
                    'manifest' //必须将manifest独立出来,否则会位于vendors中,导致vendors的md5永远在变化
                ].concat(options.commonChunks),
                // 注意: webpack-dev-server 模式下[chunkhash]不可用(vendors返回为undefined),请使用[hash].
                // webpack命令行直接build是可以用[chunkhash]的
                filename: isProductionENV ? "[name].[chunkhash].js" : "[name].[hash].js"
            }),

            // 模板传参数请看源码： HtmlWebpackPlugin.prototype.executeTemplate
            new HtmlWebpackPlugin({
                filename: 'index.html',
                template: options.htmlTpl,
                inject: 'body',

                //html压缩
                minify: isProductionENV ? {
                    removeComments: true,
                    collapseWhitespace: true
                } : false,

                // htmlWebpackPlugin.options增加属性
                // 用于记录当前git的代码版本和发布时间
                XM_GIT_COMMIT_HASH: gitRevisionPlugin.commithash(),
                XM_PUBLISH_DATE: dateFns.format(new Date(), 'YYYY/MM/DD HH:mm:ss'),
            }),

            new InlineChunkWebpackPlugin({
                // 将manifest的chunk在html中直出,减少http请求
                inlineChunks: ['manifest']
            }),

            // 优化React的生产代码，用来生成没有注释和各种warning及仅debug相关的代码
            new webpack.DefinePlugin({
                // 声明全局变量： process.env.NODE_ENV
                'process.env': {
                    NODE_ENV: JSON.stringify(isProductionENV ? "production" : "development")
                }
            }),

            new FriendlyErrorsWebpackPlugin(),

            lessExtract,
            scssExtract,
            cssExtract,
            cssModulesExtract,
        ]
    };

    // 生产环境的特殊构建
    if (isProductionENV) {
        config.plugins = config.plugins.concat([
            // 缩减lodash的体积 TODO 貌似有问题，导致lodash报错
            // new LodashModuleReplacementPlugin(),
            // 优化模块id顺序，可能与WebpackStableModuleIdAndHash冲突
            // new webpack.optimize.OccurrenceOrderPlugin(),
            // new webpack.NamedModulesPlugin(),
            new webpack.optimize.DedupePlugin(), // 去除重复模块 有些JS库有自己的依赖树，并且这些库可能有交叉的依赖，DedupePlugin可以找出他们并删除重复的依赖。
            new webpack.optimize.UglifyJsPlugin({ // 压缩JS
                output: {
                    comments: false     // remove all comments
                },
                compress: {
                    warnings: false
                }
            }),
            // 稳定模块id（当app.js大面积修改时，可能导致vendor里的模块id变化，影响缓存）
            new WebpackStableModuleIdAndHash()
        ])
    }
    // 开发环境的特殊构建
    else {
        config.plugins = config.plugins.concat([
            // 参考 https://github.com/gaearon/react-hot-boilerplate
            new webpack.HotModuleReplacementPlugin(),
        ]);
    }

    if (shouldBuildSourceMap) {
        Object.assign(config, {
            //开启js的sourcemap功能支持
            //  must be 'source-map' or 'inline-source-map'
            // 详解sourcemap配置： https://segmentfault.com/a/1190000004280859
            devtool: isProductionENV
                ? 'source-map' // 生产环境因为有压缩代码，所以必须是source-map保证完整的源码
                : 'cheap-module-source-map'  //   开发环境使用这个cheap-module-source-map就行了，编译速度比source-map更快
        });
    }

    console.log('webpack配置：');
    console.log(JSON.stringify(config, null, 4));
    return config;


}

module.exports = webpackConfigMaker;