webpack使用筆記（一）

1、使用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;
    }
}

2、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",
    }

3、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'
})

4、使用art-template時可以先將模板文件進行壓縮在預編譯

loaders: [
	// 先對html模板文件進行壓縮再預編
	{ test: /\.tpl/, loader: 'art-template!html-minifier' },
]

5、使用postcss編譯css文件時，可以將postcss的配置文件寫入單獨的postcss.config.js文件中

...
module: {
	....
},
// 也可以將該配置移除，單獨一個配置文件postcss.config.js
postcss: [postcss(), autoprefixer()],
...

6、使用HtmlWebpackPlugin壓縮html時，minify配置參數可從node_modules\html-minifier\sample-cli-config-file.conf獲取。

sample-cli-config-file.conf的配置是比較完整的，請根據自己的情況刪減配置。可將ample-cli-config-file.conf里面的配置寫入htmlminify.config.js文件中，然后再webpack文件中使用

var htmlMinifyOptions = require('./htmlminify.config.js'); //htmlminify的配置參數
...
plugins: [
	new HtmlWebpackPlugin({
		title: '后台管理 . NOCOQ',
		template: path.resolve(CTRL_ROOT_PATH, 'views/home/index_tpl.cshtml'),
		filename: path.resolve(CTRL_ROOT_PATH, 'views/home/index.cshtml'),
		minify: isprod ? htmlMinifyOptions : false, // 生產模式下壓縮html文件
		chunks: ['index', 'vendors'],   // 配置要添加的模塊
		inject: 'body'
	}),
],
...

7、配置一個簡短的命令，方便在cmd中快速執行

每次運行webpack命令時，總是要寫一長串的命令，如：webpack --config webpack.admin.config.js --proccess --color，每次都這樣子寫，很麻煩！我們可以在package.json文件中配置一些我們經常使用的命令；在package.json添加scripts節點：

"scripts": {
	"admin-build": "webpack --config webpack.admin.config.js --proccess --color",
	"admin-watch": "webpack --config webpack.admin.config.js --proccess --color --watch",
	"admin-release": "webpack --config webpack.admin.config.js --proccess --color -p",
}

然后就可以在命令行中輸入簡短命令 npm run admin-build 執行了。

8、加載器的執行順序是從右開始的。

所以請把html-minifier放在art-template的右邊，把sass-loader放在css-loader的右邊

// 先對html模板文件進行壓縮再預編
{ test: /\.tpl/, loader: 'art-template!html-minifier' },
{
	test: /\.scss$/,
	loader: ExtractTextPlugin.extract(["css-loader?sourceMap", "postcss-loader", "sass-loader?sourceMap"]) 
}

9、style-loader與sass-loader、postcss-loader、less-loader使用報錯

請改成以下寫法：style-loader，必須和后面那堆分開，后面這堆必須寫在一起。

{
    test: /\.css$/,
    loader: ExtractTextPlugin.extract("style", "css!postcss?" + cssparams) //style-loader與postcss-loader使用報錯的，修復的正確寫法
},
{
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract("style", "css!postcss!sass?sourceMap") //巨坑 必須這么寫
},

10、報錯 Module build failed: ReferenceError: window is not defined.

請參考9的修復方法。

如果對你有幫助，請捐贈共勉（微信支付）

以下是一個完整的webpack配置文件

//webpack.config.js
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");// 提取/分離css
var CleanWebpackPlugin = require('clean-webpack-plugin'); // 刪除文件
var CopyWebpackPlugin = require('copy-webpack-plugin'); // 拷貝文件
var BomPlugin = require('webpack-utf8-bom');//將文件轉成utf-8 bom格式，解決中文亂碼的問題
var postcss = require('postcss');
var autoprefixer = require('autoprefixer');

// 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 ROOT_PATH = path.resolve(__dirname);
var CTRL_ROOT_PATH = path.resolve(__dirname, "administration");
var JS_SRC_PATH = path.resolve(CTRL_ROOT_PATH, 'dev');
var STATIC_SRC_PATH = path.resolve(CTRL_ROOT_PATH, "static_src");
var STATIC_DIST_PATH = path.resolve(CTRL_ROOT_PATH, 'static');

var cssparams = JSON.stringify({ sourceMap: true, discardComments: { removeAll: isprod } });
var htmlMinifyOptions = require('./htmlminify.config.js'); //htmlminify的配置參數



var JS_PATH_FORMAT = "[name]" + (isprod ? ".[hash:6]" : "") + ".js";
var CSS_PATH_FORMAT = "styles/[name]" + (isprod ? ".[contenthash:6]" : "") + ".css";
var FONT_PATH_FORMAT = "fonts/[name]" + (isprod ? ".[hash:6]" : "") + ".[ext]";
var IMG_PATH_FORMAT = "images/[name]" + (isprod ? ".[hash:6]" : "") + ".[ext]";
var VENDORS_PATH_FORMAT = "vendors" + (isprod ? ".[hash:6]" : "") + ".js";


module.exports = {
    entry: {

        index: path.resolve(JS_SRC_PATH, 'index.js'),
        login_index: path.resolve(JS_SRC_PATH, 'login_index.js'),
        vendors: ['jquery', 'datepicker'],
        //"jquery-ui": ["jquery-ui/themes/base/core.css", "jquery-ui/themes/base/datepicker.css", "jquery-ui/themes/base/theme.css"],
        //"style": [path.resolve(JS_SRC_PATH, 'styles/style.css')],
    },
    output: {
        //context: path.resolve(__dirname, 'scripts'),
        path: path.resolve(STATIC_DIST_PATH),
        publicPath: '/administration/static/',//當生成的資源文件和站點不在同一地方時需要配置改地址 e.g.：站點在src,資源生成到/src/static/dist，那么publicPath="/static/dist"
        filename: JS_PATH_FORMAT,
        chunkFilename: "[id].chunk.js",
    },
    devtool: "source-map",
    plugins: [
        //new webpack.ProvidePlugin({$: 'jquery'}),
        new ExtractTextPlugin(CSS_PATH_FORMAT, { allChunks: false }),
        new HtmlWebpackPlugin({
            title: '后台管理 . NOCOQ',
            template: path.resolve(CTRL_ROOT_PATH, 'views/home/index_tpl.cshtml'),
            filename: path.resolve(CTRL_ROOT_PATH, 'views/home/index.cshtml'),
            minify: isprod ? htmlMinifyOptions : false, // 生產模式下壓縮html文件
            chunks: ['index', 'vendors'],   // 配置要添加的模塊
            inject: 'body'
        }),
        new HtmlWebpackPlugin({
            title: '登錄后台管理 . NOCOQ',
            template: path.resolve(CTRL_ROOT_PATH, 'views/account/login_tpl.cshtml'),
            filename: path.resolve(CTRL_ROOT_PATH, 'views/account/login.cshtml'),
            minify: isprod ? htmlMinifyOptions : false, // 生產模式下壓縮html文件
            chunks: ['login_index', 'vendors'],   // 配置要添加的模塊
            inject: 'body'
        }),
        new CommonsChunkPlugin('vendors', VENDORS_PATH_FORMAT),
        new CleanWebpackPlugin(['static', 'build'], {
            root: CTRL_ROOT_PATH,
            verbose: true,
            dry: false,
            //exclude: ["dist/1.chunk.js"]
        }),
        new BomPlugin(true, /\.(cshtml)$/),//解決cshtml中文亂碼的問題
        //new CopyWebpackPlugin([{
        //    from: 'faces', to: 'faces'
        //}]),
        /*new webpack.optimize.UglifyJsPlugin({
            //beautify: false,
            compress: {
                warnings: false,
            },
            output: {
                comments: false
            }
        }),*/
    ],
    module: {
        // require
        unknownContextRegExp: /$^/,
        unknownContextCritical: false,

        // require(expr)
        exprContextRegExp: /$^/,
        exprContextCritical: false,

        // require("prefix" + expr + "surfix")
        wrappedContextRegExp: /$^/,
        wrappedContextCritical: false,

        loaders: [
            { test: require.resolve('jquery'), loader: 'expose?$!expose?jQuery' },// 將jQuery暴露到全局變量中
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style", "css!postcss?" + cssparams) //style-loader與postcss-loader使用報錯的，修復的正確寫法
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style", "css!postcss!sass?sourceMap") //巨坑 必須這么寫
            },
            { test: /\.(woff|woff2|eot|ttf|svg)(\?[a-z0-9]+)?$/, loader: 'url-loader?limit=1000&name=' + FONT_PATH_FORMAT }, // 處理圖片url
            { test: /\.(png|jpg|gif)(\?[a-z0-9]+)?$/, loader: 'url-loader?limit=1000&name=' + IMG_PATH_FORMAT }, // 處理圖片url limit=1000 小於1kb則生成base64
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel', // 'babel-loader' is also a valid name to reference
                query: {
                    presets: ['es2015']
                }
            },
            //提取html中的img文件
            { test: /\.html/, loader: 'html?root=' + path.resolve(HTML_SRC_PATH) },
            // 先對html模板文件進行壓縮再預編
            { test: /\.tpl/, loader: 'art-template!html-minifier' },
        ]
    },
    postcss: [postcss(), autoprefixer()],
    resolve: {
        alias: {
            "datepicker": "jquery-ui/ui/widgets/datepicker",
        }
    }
};

強烈建議博客園換一個MD編輯器