使用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,// endloaders: [{ 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 referencequery: {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;

轉載于:https://www.cnblogs.com/wenzengxun/p/6129959.html

總結

以上是生活随笔為你收集整理的webpack使用和踩过的坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。