webpack項目打包配置

webpack.config.js 文件中，其中「plugins」最爲重要

var path = require("path");
const webpack = require("webpack");
var CompressionWebpackPlugin = require("compression-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: {
        app: "./src/main.js"
    },
    output: {
        path: path.resolve(__dirname, "./wwwroot"),
        filename: "[name].[chunkhash:8].js"//對js添加hash指紋
    },
    module: {
        rules: [{
                test: /\.vue$/,
                loader: "vue-loader",
                options: {
                    sourceMap: true,
                    loaders: {
                        scss: "style-loader!css-loader!sass-loader",
                        sass: "style-loader!css-loader!sass-loader?indentedSyntax"
                    }
                }
            },
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.less/,
                loader: "style!css!autoprefixer!less"
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: "url-loader"
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: "url-loader"
            }
        ]
    },
    //devtool: "#source-map",
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                //注意一個單引號一個雙引號…… 這裏是要將 "production" 替換到文件裏面
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            comments: false, //去掉註釋
            compress: {
                warnings: false //忽略警告,要否則會有一大堆的黃色字體出現……
            }
        }),
　　　　  //根據模板自動生成 'Index.cshtml' 文件，而且將帶有hash指紋的js打入到html中
        new HtmlWebpackPlugin({
            filename: path.resolve(__dirname, './Views/Home/Index.cshtml'), //生成的文件，從 output.path 開始 output.path + "/react.html"
            template: 'index.cshtml', //讀取的模板文件,這個路徑是相對於當前這個配置文件的
            inject: false, // 自動注入
            hash: true,
            minify: {
                removeComments: true, //去註釋
                collapseWhitespace: true, //壓縮空格
                // removeAttributeQuotes: true //去除屬性引用
                // more options:
                // https://github.com/kangax/html-minifier#options-quick-reference
            }
        })
    ]
};

最後執行 webpack -p 打包