1. 程式人生 > >webpack項目打包配置

webpack項目打包配置

exclude define babel more optimize index xtra ini process

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 打包

webpack項目打包配置