使用process.argv 获取命令行使用的参数

// 判断是否带production参数,production会压缩js
var isprod = false;
for (var i in process.argv) {
if (process.argv[i] === "-p" || process.argv[i] === "--production") {
isprod = true;
break;
}
}

url-loader 路径不正确,可通过 publicPath进行配置

output: {
//context: path.resolve(__dirname, 'scripts'),
path: path.resolve(HTML_DIST_PATH, "assets"),
publicPath: '/dist/assets/',//当生成的资源文件和站点不在同一地方时需要配置改地址 e.g.:站点在src,资源生成到/src/static/dist,那么publicPath="/static/dist"
filename: "[name].[hash:6].js",
chunkFilename: "[id].chunk.js",
}

html-webpack-plugin minify: true 报错,请改成

new HtmlWebpackPlugin({
title: '',
template: currentpath,
filename: currentpath.replace("\\html\\", "\\dist\\"),
minify: {
"removeAttributeQuotes": true,
"removeComments": true,
"removeEmptyAttributes": true,
}
//chunks: ['index', 'vendors'], // 配置该html文件要添加的模块
inject: 'body'
}) //extract-text-webpack-plugin 同时使用style-loader和postcss-loader时会报错,将style-loader移除
ExtractTextPlugin.extract(["css-loader", "postcss-loader"])

完整的配置文件

var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin'); // 自动写入将引用写入html
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); // 提取公共模块
var ExtractTextPlugin = require("extract-text-webpack-plugin");// 默认的webpack 会将require("style.css")文件嵌入js文件中,使用该插件会将css从js中提取出来
var CleanWebpackPlugin = require('clean-webpack-plugin'); // 删除文件
var CopyWebpackPlugin = require('copy-webpack-plugin'); // 拷贝文件
var BomPlugin = require('webpack-utf8-bom');//将文件转成utf-8 bom格式,解决中文乱码的问题
var autoprefixer = require('autoprefixer')
var cssparams = JSON.stringify({ discardComments: { removeAll: false } }); var htmlMinifyOptions = require('./htmlminify.config.js'); //htmlminify的配置参数 //定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var HTML_ROOT_PATH = path.resolve(__dirname, "html");
var HTML_SRC_PATH = path.resolve(ROOT_PATH, 'dev');
var HTML_DIST_PATH = path.resolve(ROOT_PATH, 'dist'); // process.argv 获取命令行使用的参数
// 判断是否带production参数,production会压缩js
var isprod = false;
for (var i in process.argv) {
if (process.argv[i] === "-p" || process.argv[i] === "--production") {
isprod = true;
break;
}
} var config = {
entry: {
index: path.resolve(HTML_SRC_PATH, 'index.js'),
vendors: ['jquery'],
},
output: {
//context: path.resolve(__dirname, 'scripts'),
path: path.resolve(HTML_DIST_PATH, "assets"),
publicPath: '/dist/assets/',//当生成的资源文件和站点不在同一地方时需要配置改地址 e.g.:站点在src,资源生成到/src/static/dist,那么publicPath="/static/dist"
filename: "[name].[hash:6].js",
chunkFilename: "[id].chunk.js",
},
plugins: [
new ExtractTextPlugin("styles/[name].[contenthash:6].css", { allChunks: false /*是否将分散的css文件合并成一个文件*/ }),
new CommonsChunkPlugin('vendors', 'vendors.[hash:6].js'),
new CleanWebpackPlugin(['dist', 'build'], {
root: ROOT_PATH,
verbose: true,
dry: false,
//exclude: ["dist/1.chunk.js"]
}),
//new webpack.optimize.UglifyJsPlugin({
// beautify: true,
// compress: { warnings: false, },
// output: { comments: true }
//}),
//new BomPlugin(true, /\.(cshtml)$/),//解决cshtml中文乱码的问题
],
module: {
// 解决动态js url警告错误
unknownContextRegExp: /$^/,
unknownContextCritical: false, // require(expr)
exprContextRegExp: /$^/,
exprContextCritical: false, // require("prefix" + expr + "surfix")
wrappedContextRegExp: /$^/,
wrappedContextCritical: false,
// end
loaders: [
{ test: require.resolve('jquery'), loader: 'expose?$!expose?jQuery' },// 将jQuery暴露到全局变量中
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(["css-loader", "postcss-loader"]) //同时使用style-loader和postcss-loader时会报错,将style-loader移除
},
{ test: /\.(woff|woff2|eot|ttf|svg)(\?[a-z0-9]+)?$/, loader: 'url-loader?limit=1000&name=styles/fonts/[name].[hash:6].[ext]' }, // 处理图片url
{ test: /\.(png|jpg|gif)(\?[a-z0-9]+)?$/, loader: 'url-loader?limit=1000&name=styles/images/[name].[hash:8].[ext]' }, // 处理图片url limit=1000 小于1kb则生成base64
//{ test: /\.css$/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] },
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a valid name to reference
query: {
presets: ['es2015']
}
},
{ test: /\.tpl/, loader: 'art-template-loader' },
]
},
postcss: [autoprefixer()],
resolve: {
alias: {
"datepicker": "jquery-ui/ui/widgets/datepicker",
}
}
};
// 遍历所有.html文件,使用HtmlWebpackPlugin将资源文件引入html中
var htmlfiles = fs.readdirSync(HTML_ROOT_PATH);
htmlfiles.forEach(function (item) {
var currentpath = path.join(HTML_ROOT_PATH, item);
//console.log(currentpath);
var extname = path.extname(currentpath);
if (fs.statSync(currentpath).isFile()) {
//console.log("replace", currentpath.replace("\\html\\", "\\dist\\"))
config.plugins.push(new HtmlWebpackPlugin({
title: '',
template: currentpath,
filename: currentpath.replace("\\html\\", "\\dist\\"),
minify: isprod ? htmlMinifyOptions : false, // 生产模式下压缩html文件
//chunks: ['index', 'vendors'], // 配置该html文件要添加的模块
inject: 'body'
}))
}
}); module.exports = config;

webpack踩过的坑(总结)的更多相关文章

  1. vue、gulp、webpack踩过的坑和笔记

    1.监听流错误 stream-combiner2 2.热更新Browsersync与element冲突,换成gulp-connect 3.gulp-uglify压缩js不能压缩es6 4.使用vue- ...

  2. 开始更新webpack踩坑笔记

    今天开始学习webpack,记录下踩过的坑-zxf

  3. [坑况]——webpack搭建前端环境踩过的坑啊

    前言 嘿哈,webpack搭建前端环境踩过的坑啊! 第一个:完全不知所措 webpack4 下面用不了HtmlWebpackPlugin 和 ExtractTextPlugin 解决方案: html- ...

  4. 使用vue开发项目需要注意的问题和可能踩到的坑

    最近,在公司给一些刚刚使用vue进行开发的同学做了一次分享, 其中包括一些vue开发中需要注意的点, 以及一些可能会踩到的坑.具体内容如下: 一.生命钩子使用需要注意的地方 1.beforeCreat ...

  5. 项目中踩过的坑之-sessionStorage

    总想写点什么,却不知道从何写起,那就从项目中踩过的坑开始吧,希望能给可能碰到相同问题的小伙伴一点帮助. 项目情景: 有一个id,要求通过当前网页打开一个新页面(不是当前页面),并把id传给打开的新页面 ...

  6. web开发实战--弹出式富文本编辑器的实现思路和踩过的坑

    前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...

  7. "开发路上踩过的坑要一个个填起来————持续更新······(7月30日)"

    欢迎转载,请注明出处! https://gii16.github.io/learnmore/2016/07/29/problem.html 踩过的坑及解决方案记录在此篇博文中! 个人理解,如有偏颇,欢 ...

  8. 【转载】Fragment 全解析(1):那些年踩过的坑

    http://www.jianshu.com/p/d9143a92ad94 Fragment系列文章:1.Fragment全解析系列(一):那些年踩过的坑2.Fragment全解析系列(二):正确的使 ...

  9. Redis Cluster踩过的坑

    Redis Cluster踩过的坑请参考如下链接:http://www.iteye.com/blogs/subjects/Redis_Cluster_Devops

随机推荐

  1. securecrt 的安装

    http://bbs.feng.com/read-htm-tid-6939481.html ssh  -t  ip地址@用户名  -p 22

  2. Android 手机随音乐振动

    想到做一个Android软件可以在播放音乐的同时手机在音量或者音调高的时候振动一下. 等我熟练Android的时候试试...

  3. c++11实现optional

    optional< T> c++14中将包含一个std::optional类,optional< T>内部存储空间可能存储了T类型的值也可能没有存储T类型的值.当optiona ...

  4. Microchip编译器产品线—MPLAB XC简介

    以下为Microchip最新编译器产品线—MPLAB-XC简介 MPLAB-XC:适合所有PIC单片机和项目的编译器解决方案 Microchip最新编译器产品线—MPLAB-XC为项目开发的软件需求提 ...

  5. LeetCode——Happy Number

    Description: Write an algorithm to determine if a number is "happy". A happy number is a n ...

  6. 旅游吧!我在这里 ——旅游相册POI搜索:找回你的足迹

    版权声明:本文由林少彬原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/89 来源:腾云阁 https://www.qclou ...

  7. javascript:;禁用a标签默认功能的缺点。

    在使用a标签做切换tab或者其他功能时,经常使用javascript:;来作为a标签的href来使用. 缺点: 1.在js尚未加载的情况下,点击该a标签会弹出新窗口. 2.会使gif动画失效(没经历过 ...

  8. 详解struts2中配置action的方法

    如何解决action太多的问题??我们因为需要不同的方法,所以往往建立很多不同的类,但是每个类中往往仅仅几行代码,不仅浪费了时间,而且配置起来也很繁琐,所以,建立一个共有的类,然后根据以下方式来操作, ...

  9. 次小生成树(poj1679)

    The Unique MST Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 20737   Accepted: 7281 D ...

  10. mongodb拆库分表脚本

    脚本功能: 1. 将指定的报告文件按照指定的字段.切库切表策略切分 2. 将切分后的文件并发导入到对应的Mongodb中 3. 生成日志文件和done标识文件 使用手册: -h    打印帮助信息,并 ...