webpack 配置详解

最近在学习webpack，边学边练习，下面是对一些应用到的属性、插件记录分享出来，也方便之后查找与复习，过程当中碰到了一些坑，在注释中有说明：

const path = require('path')
const webpack = require("webpack")

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

function parseUrl(dir) {
    let mark = '\\'.indexOf(dir) !== -1 ? '\\' : '\/';
    return dir.split(mark).slice(0, -1).join(mark);
}
/**
 * 说明
 * 
 * 一、能够经过import(\/* webpackChunkName: "lodash_file" *\/ 'lodash').then()这种方式动态添加Chunk，
 *      打包之后会独立成一个文件，注释部分结合output- chunkFilename 命名打包后的文件名
 * 二、chunk名称，能够经过entry进行定义，也有一些默认的chunk包
 */
module.exports = {
    entry: {  // 命名chunk，后面能够经过属性名调用到
        app: './app/index.js',
        check: './src/check.js',
        repeat: './src/repeat.js',
        vender: [
            'colors',
            'lodash'
        ]
    },
    
};

output

output: {
    // 文件用hash打包的时候([name].[chunkhash].js)，须要关闭热替换，生产环境是不须要热替换的
    // filename: '[name].bundle.js',
    filename: '[name].[chunkhash].js',
    path: path.resolve(parseUrl(__dirname), 'dist'),
    publicPath: '/',  // webpack-dev-middleware插件用到的公共路径，在server.js文件中会用到
    chunkFilename: '[name].bundle.js',  // 能够控制动态加载文件名称
},

devtool

/**
 * devtool 
 * 
 * 追踪错误和警告，打包之后，使用打包文件也能够追踪到哪一个文件出错，能够有多个选项，
 * 参见：https://segmentfault.com/a/1190000004280859 或 https://doc.webpack-china.org/configuration/devtool （官网）
 * 
 * 开发环境推荐使用 cheap-module-eval-source-map
 * 理由：
 * 一、不生成列信息，能够大幅提升 souremap 生成的效率，若是须要列信息，有些浏览器也能够自动生成列信息
 * 二、使用 eval 方式可大幅提升持续构建效率，参见 https://doc.webpack-china.org/configuration/devtool 效率对照表
 * 
 * 生产环境使用 source-map
 */
devtool: 'cheap-module-eval-source-map',

watch

// 监听项目是否有改动，若是有改动直接影响修改
watch: true,
watchOptions: {
    // 从新构建一次的延迟时间，在这段时间内有其余变更，会收集起来一块儿构建
    aggregateTimeout: 300,
    poll: 1000,  // 每秒检查一次变更
    ignored: /node_modules/  // 忽略node_modules文件夹中的文件变更，提高性能
},

devserver

//  构建一个web服务器
devServer: {
    contentBase: '../dist',  // 指定服务响应目录
    hot: true,  // 启用热替换模块 须要在入口文件中进行配置监听，详细参考文档https://doc.webpack-china.org/guides/hot-module-replacement/
},

module

module: {
    // 解析文件时匹配相对应的loader
    rules: [
        {
            test: /\.css$/,
            use: ["style-loader", "css-loader"],
            use: ExtractTextPlugin.extract({  // 样式独立打包
                use: 'css-loader'
            })
        },
        {
            test: /\.(png|svg|jpg|gif)$/,
            use: [
                'file-loader'
            ]
        }
    ]
},

plugins

plugins: [
    // 分离css依赖，生成独立样式包，放入参数文件中（没有会自动生成）
    new ExtractTextPlugin('styles.css'),

    // 生成html模板，调用了webpack生成的全部包
    new HtmlWebpackPlugin({
        title: 'Output Management',
        filename: 'index.html',
        // chunksSortMode: 'none',  // 模块排列顺序
        // chunks: ['app'],  // 渲染模板，输入入口定义的模板名称
        excludeChunks: ['check'], // 排除的渲染模板，以输入入口定义的模板名称为准
        template: 'index.html'  // 模板路径，在现有模板的基础上将打包生成的chucks添加上去
    }),

    // 先清除文件夹后生成，避免没必要要的文件存在，根目录下的不能清除
    new CleanWebpackPlugin(['../dist']),

    // prints more readable module names in the browser console on HMR updates
    new webpack.NamedModulesPlugin(),

    /**
     * 热替换
     * 
     * 须要在devServer属性配置 hot:true 而且建立组件 启动热替换
     * 经过 module.hot 属性，用来接收监听接口 放到入口文件中
     * 使用热替换能够实现局部刷新，节省开发时间
     * 若是没有引入热替换，修改后就会所有刷新，影响响应速度
     * HMR 修改样式表时，须要在hot下引入接口，
     * 注意：使用热替换监听样式修改时，不能启动样式表独立打包模式，若是启动浏览器就不能响应到样式的修改
     * API连接：https://doc.webpack-china.org/api/hot-module-replacement
     */
    new webpack.HotModuleReplacementPlugin(),

    // 代码压缩，能够配置source map模式
    // new UglifyJSPlugin({
    //     // 使用source map模式(devtool属性必须设置为devtool: 'source-map')
    //     // 做用：在生产环境中也能够很方便的调试代码，相似于devtool: 'inline-source-map'模式
    //     sourceMap: true
    // }),

    new webpack.DefinePlugin({
        // 定义环境变量，能够在打包入口文件中获取到，相应环境变量
        'process.env': {
            'NODE_ENV': JSON.stringify('production')
        }
    }),

    // 将公共的依赖模块提取到已有的入口 chunk 中 
    // 能够建立多个
    // 能够提取自带 chunk 独立打包，好比：boilerplate 、 manifest ....
    new webpack.optimize.CommonsChunkPlugin({
        name: 'common', // chunk 的名称
        filename: 'common_file.js',  // 输出 chunk 文件名

        /**
         * 公共 chunk 以前所须要包含的最少数量的 chunks（也就是有几个chunk依赖）
         * 
         * 一、可选择 number|Infinity(立刻生成 公共chunk，但里面没有模块)|function(module, count) -> boolean,
         * 二、能够调用函数 返回true的文件打包成独立文件，false 不会独立成包
         * 
         * @param module 模块信息
         * @param count 调用数量
         */
        minChunks: function (module, count) {
            // 禁止打包样式相关文件（有组件针对样式文件打包）
            if (module.resource && (/^.*\.(css|scss)$/).test(module.resource)) {
                return false;
            }
            // node_modules文件夹中的文件独立打包
            return module.context && module.context.indexOf("node_modules") !== -1;
        }
    }),

    // 能够根据 entry 或name名称进行分离打包，
    // 若是和 chunk = 'common' 共用，会报错
    new webpack.optimize.CommonsChunkPlugin({
        name: "vender",
        minChunks: Infinity
    }),

    // 避免hash发生变化
    // new webpack.HashedModuleIdsPlugin(),
]

若是有什么不对的地方，欢迎指正。