webpack使用筆記（一）

一、使用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'
})

四、使用art-template時能夠先將模板文件進行壓縮在預編譯

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

五、使用postcss編譯css文件時，能夠將postcss的配置文件寫入單獨的postcss.config.js文件中

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

六、使用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'
    }),
],
...

七、配置一個簡短的命令，方便在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 執行了。

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

因此請把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"]) 
}

九、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") //巨坑 必須這麼寫
},

十、報錯 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編輯器