webpack項目打包配置
阿新 • • 發佈:2017-11-20
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項目打包配置