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项目打包配置的更多相关文章

  1. Maven学习笔记-02-Maven项目打包配置与测试

    一 Maven项目打包配置 1 为整个项目统一指定字符集 <properties> <project.build.sourceEncoding>UTF-</project ...

  2. vue+webpack项目打包后背景图片加载不出来问题解决

    在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...

  3. maven 项目打包配置(build节点)

    参考博客:https://www.cnblogs.com/Binhua-Liu/p/5604841.html maven-assembly-plugin的使用 : https://www.cnblog ...

  4. vue -- vue-cli webpack项目打包后自动压缩成zip文件

    用vue2.0开发项目,使用npm run build 命令 ,但是只会生成dist文件夹,以下是生成zip压缩包方法 1,插件安装 webpack插件安装 filemanager-webpack-p ...

  5. vue项目打包配置多个测试环境与生产环境,用npm命令打出不同的资源包。

    1.找到package.json文件,找到script节点.再新增一个新的脚本命令 test 2.修改prod.env.js配置文件,npm_lifecycle_event代表返回当前执行的脚本名称, ...

  6. dva+react+antd+webpack 项目开发配置

    如何搭建一个dva项目如何搭建一个dva项目 后期项目会在github上进行书写,同时也会在segmentfault上进行同步-3Q拜读-

  7. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  8. 在找一份相对完整的Webpack项目配置指南么?这里有

    Webpack已经出来很久了,相关的文章也有很多,然而比较完整的例子却不是很多,让很多新手不知如何下脚,下脚了又遍地坑 说实话,官方文档是蛮乱的,而且有些还是错的错的..很多配置问题只有爬过坑才知道 ...

  9. vue-cli+webpack打包配置

    vue-cli+webpack打包配置 一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...

随机推荐

  1. 利用Linux系统生成随机密码的10种方法【转】

    Linux操作系统的一大优点是对于同样一件事情,你可以使用高达数百种方法来实现它.例如,你可以通过数十种方法来生成随机密码.本文将介绍生成随机密码的十种方法. 1. 使用SHA算法来加密日期,并输出结 ...

  2. python3+selenium入门06-浏览器操作

    WebDriver主要提供元素操作的方法,但也提供了一些关于浏览器操作的方法,比如设置浏览器大小,浏览器前进,后退,刷新等 设置浏览器大小 有时候需要设置浏览器大小,比如访问收集网页,设置浏览器大小跟 ...

  3. boost::bind 介绍

    boost::bind 介绍   这篇文章介绍boost::bind()的用法, 文章的主要内容是参考boost的文档. 1. 目的 boost::bind 是std::bindlist 和 std: ...

  4. cu命令

    选项: -b:仅显示行中指定直接范围的内容: -c:仅显示行中指定范围的字符: -d:指定字段的分隔符,默认的字段分隔符为“TAB”: -f:显示指定字段的内容: -n:与“-b”选项连用,不分割多字 ...

  5. 题解-bzoj4061 CERC-2012Farm and Factory

    Problem Please contact lydsy2012@163.com! 题意概要:给定\(n\)点\(m\)边无向图,设定两个起点为\(1,2\),现要求在图中增加一个点,并将这个点与其他 ...

  6. ubuntu16.04彻底删除nginx+php

    1.1 删除nginx,–purge包括配置文件 sudo apt-get --purge remove nginx 1.2 自动移除全部不使用的软件包 sudo apt-get autoremove ...

  7. 通过zabbix自带api进行主机的批量添加操作

    通过zabbix自带api进行批量添加主机 我们需要监控一台服务器的时候,当客户端装好zabbix-agent端并正确配置以后,需要在zabbix-server的web gui界面进行添加zabbix ...

  8. Mysql 的安装(压缩文件)和基本管理

    MySql安装和基本管理   本节掌握内容: mysql的安装.启动 mysql破解密码 统一字符编码 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle ...

  9. 19)django-cookie使用

    Cookie,有时也用其复数形式 Cookies,指某些网站为了辨别用户身份.进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密) 一:cookie cookie在客户端浏览器的是以 ...

  10. Java学习——集合框架【4】

    一.集合框架 集合框架是一个用来代表和操纵集合的统一架构.所有的集合框架都包含如下内容: 接口:是代表集合的抽象数据类型.接口允许集合独立操纵其代表的细节.在面向对象的语言,接口通常形成一个层次. 实 ...