webpack2 配置分享

任务型学习..

活动页配置

先放一份配置(适合简单的活动页)
...可以使用ES6，使用模块，使用sass，还有postcss后处理工具(这个选择了另外做配置postcss.config.js)，另外添加了两个模块，一个负责压缩，一个负责另外生成html文件，更新对应的版本号。
@Q:最开始选择hash值添加在js或者css后，后来发现每次更新，都是另外生成两个js/CSS文件..因为不重名，不是被替换...后来想着自己加hash只是为了清除缓存，就选择直接在html加版本号了。
@Q:遗留的问题是还不会处理生成的html内对js和css的路径处理。

let path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const HtmlPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.resolve(__dirname, 'src/index.js'), //这里是绝对路径
    output: {
        path: path.resolve(__dirname, 'build/'),
        filename: '28newer.js',
    },
    devtool: 'source-map', //添加map，便于debug
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [{
                        loader: "css-loader" // add ?minimize could minify translates CSS into CommonJS
                    }, {
                        loader: "postcss-loader"
                    },
                        {
                            loader: "sass-loader" // compiles Sass to CSS
                        }]
                })
            }, {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    plugins: [
        new HtmlPlugin({
            template: 'test.html', //模板选择，支持ejs等，具体配置看文档
            filename: 'index.html', //不是写生成路径，是写名字
            title: 'exam', //生成的html文档
            hash: true // 是否为html包含的script和css添加hash值
        }),
        new ExtractTextPlugin("28newer.css") ,//这里负责另外生成css，而不内嵌
        new UglifyJSPlugin({ //这里是负责压缩的
            // 最紧凑的输出
            beautify: false,
            // 删除所有的注释
            comments: false,
            compress: {
                // 在UglifyJs删除没有用到的代码时不输出警告
                warnings: false,
                // 删除所有的 `console` 语句
                // 还可以兼容ie浏览器
                drop_console: true,
                // 内嵌定义了但是只用到一次的变量
                collapse_vars: true,
                // 提取出出现多次但是没有定义成变量去引用的静态值
                reduce_vars: true,
            }
        })
    ]
};

考虑重复模块处理配置

待续...