參考文章：
入門 Webpack腾务，看這篇就夠了
Webpack 中文文檔
一捂龄、基本使用舉例
1、命令行調(diào)用
webpack main.js bundle.js
常用參數(shù)
-p # 混淆花竞、壓縮
--progress # 顯示進(jìn)度
--display-modules # 顯示加載模塊
--watch # 自動監(jiān)測變化哥力，重新打包
--colors # 控制臺帶顏色輸出
--display-reasons # 顯示引用模塊原因
2迎卤、加載 css
首先安裝支持模塊 css-loader 和 style-loader：
npm install css-loader style-loader --save-dev
使用方法
（1）在文件中明確指定 loader：
// js 文件
require('style-loader!css-loader!./mystyle.css');
# shell 命令
webpack main.js bundle.js
（2）命令行中指定參數(shù)
// js 文件
require('./mystyle.css');
# shell 命令
webpack main.js bundle.js --module-bind 'css=style-loader!css-loader'
二、通過配置文件來使用 Webpack
Webpack 默認(rèn)配置文件名為 webpack.config.js魏身。如果目錄下有這個文件惊橱，直接在控制臺執(zhí)行 webpack 就可以了蚪腐。如果配置文件使用了其他名字箭昵，則需要這樣執(zhí)行：
webpack --config yourWebpackConfigFile.js
最基本的配置文件：
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"http://打包后輸出文件的文件名
}
}
其他配置文件形式，參考這里
三回季、loader 及 plugin 配置使用
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader' //添加對樣式表的處理
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
filename: 'index.html',
inject: 'body',
minify: {
// collapseWhitespace: true,
removeComments: true,
removeAttributeQuotes: true
},
myKey: "myKeyTest" //自定義值家制，頁面中通過 <%= htmlWebpackPlugin.options.myKey %> 訪問
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_debugger: true,
drop_console: true
}
})
]
};
