Webpack 2構成共有

タスク型学習..
≪アクティブ・ページ構成｜Active Page Configuration｜emdw≫
まず1部の配置(简単な活动のページに适します)...ES 6を使うことができて、モジュールを使って、sassを使って、postcssの后処理のツール(これは别の配置postcss.config.jsを选択しました)を処理して、また2つのモジュールを追加して、1つは圧縮を担当して、1つは别のhtmlファイルを生产して、対応するバージョン番号を更新します.@Q:最初にhash値をjsまたはcssに追加した後、更新するたびに、2つの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,
            }
        })
    ]
};

モジュール処理構成の検討
続行...