码迷,mamicode.com
首页 > Web开发 > 详细

webpack项目打包配置

时间:2017-11-20 13:07:27      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:erp   option   off   pac   color   项目   git   出现   svg   

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项目打包配置

标签:erp   option   off   pac   color   项目   git   出现   svg   

原文地址:http://www.cnblogs.com/fengqiaoyebo/p/7865330.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!