接觸webpack也有挺長一段時間了，公司的項目也是一直用着webpack在打包處理，但前幾天在教新人的情況下，遇到了一個問題，那就是：盡管網上的webpack教程滿天飛，但是卻很難找到一個能讓新人快速入手的、接地氣的、傻瓜式的教程，自己手把手教又太浪費時間。想了一想，決定自己寫一篇webpack的傻瓜式教程，旨在教會尚未了解webpack的人迅速入手懂得基本原理，而不是懵逼一昧用着老員工搭好的環境天天敲着“webpack -p -w”卻不知這到底是干嘛的。
對於webpack的概念、用途、好處等等一律省略，想了解的上網搜索即可，這里直接演示如何新建一個webpack的實例。
1、安裝好nodejs，安裝過程網上找。
2、在D盤、E盤或任意一個磁盤中新建文件夾，命名為webpack_demo：
3、在webpack_demo文件下按住Shift鍵后點擊鼠標右鍵，再左鍵點擊“在此處打開命令行窗口”：
在打開的命令行窗口中鍵入：
npm init
name表示項目名，version表示版本等等，不一一贅述了，看字段很容易明白，一一填完或直接一路按回車鍵，最后出現“is this ok？”時，敲擊回車鍵后webpack_demo的文件夾下便生成了package.json文件。
4、在命令行中分別執行以下命令，安裝對應的插件（--save-dev作用是安裝的插件的同時，將插件名寫入package.json的devDependencies列表中）：
npm install webpack --save-dev npm install jquery --save-dev npm install style-loader css-loader --save-dev npm install extract-text-webpack-plugin –-save-dev
安裝完成后package.json的代碼如下（name、version、description等都是在npm init步驟中手動添加而成）：
{ "name": "webpackdemo", "version": "1.0.0", "description": "a webpack demo", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "liqiyuan", "license": "ISC", "devDependencies": { "css-loader": "^0.26.1", "extract-text-webpack-plugin": "^1.0.1", "jquery": "^3.1.1", "style-loader": "^0.13.1", "webpack": "^1.14.0" } }
5、此時查看webpack_demo文件夾，會發現多出了一個文件夾：
雙擊打開，文件夾下的內容如下：
說明所需要的插件都已安裝成功。
6、在webpack_demo文件下新建文件webpack.config.js：
編輯代碼如下：
var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: './js/main.js', output: { path: './dist', filename: 'bundle.js' }, plugins: [ new ExtractTextPlugin('./style.css') ], module: { //加載器配置 loaders: [ { test: /\.css$/, loader:ExtractTextPlugin.extract("style-loader","css-loader") } // { // test: /\.(png|jpg)$/, // loader: 'url-loader?limit=8192' // } ] } };
以上代碼的意思是：
引入extract-text-webpack-plugin這個插件（用於支持打包css文件，默認只支持打包js文件），讀取當前目錄下js文件夾中的main.js（入口文件）內容，把對應的js和css文件打包，打包后的文件放入當前目錄的dist文件夾下，打包后的css文件命名為style.css，打包后的js文件名為bundle.js。
7、webpack_demo下新建js文件夾，里面新建main.js，代碼編輯如下：
require('./index/index.js');
require('./index/index2.js');
require('../css/index/index1.css');
require('../css/index/index2.css');
require('../css/common/public.css');
以上代碼意思為：引入當前目錄index文件夾下的index.js，index2.js，引入上一層目錄css文件夾下index文件下的index1.css，index2.css和common文件夾下的public.css。
8、新建上一步中對應路徑的css、js、index、common文件夾，里面分別新建對應的css或js文件，每個css、js文件里寫入不同的代碼。
9、窗口命令行中執行代碼：
webpack
出現如下提示索命打包成功：
此時打開webpack_demo文件夾，發現多了dist文件夾，打開，里面文件如下：
10、新建一個index.html文件，只引入bundle.js和style.css：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack教程</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable = no"/> <link rel="stylesheet" type="text/css" href="./dist/style.css"> </head> <body> <div>webpack</div> <script src="./dist/bundle.js"></script> </body> </html>
雙擊用瀏覽器打開這個html，會發現入口文件main.js里面引入的所有js和css文件都已經執行了。
---------------------------------------------- 我是分割線----------------------------------------------
上邊是webpack的基本用法，可見它的基本作用是把一堆js和css壓縮成一個js和css，但其實它的用法遠不僅如此，這里再說兩個常見的用法：
1、自動加css3前綴。
我們在寫一些css3的樣式時，為了良好的兼容性，往往會把css3代碼寫成如下這個樣子：
.test{ display: flex; display: -webkit-box; display: -ms-flexbox; }
如果每個css3的代碼都要手動寫一堆前綴，那不僅要奔潰還容易出錯，這種事情還是交給工具來干，會效率和靠譜的多。
2、ES6轉碼。
ES6將會是以后的趨勢了，但兼容性很差，轉碼后兼容性就大大提高了。
下面通過另一個小demo，把這一串東西給跑起來。
demo示例文件結構如下：
文件目錄結構就不畫圖了，文字說明：
app：開發文件（編譯前的文件）
css：手動編寫的css文件集
css-entry.js：css入口文件，即說明需要打包哪些css文件
index.css：css示例文件1
index2.css：css示例文件2
js：手動編寫的js文件集
index.js：js示例文件1
index.js：js示例文件2
dist：生產文件（編譯后的文件）
css：編譯后生成的css文件集
bundle.css：編譯后生成的css文件，可直接引入使用
css.js：編譯后生成的另一種css文件的用法，可先不管
js：編譯后生成的jss文件集
bundle.js：編譯后生成的js文件，可直接引入使用
node_modules：webpack自動安裝的各依賴包，不用管
package,json：配置文件，主要告訴電腦需要安裝哪些依賴包
postcss.config.js：css3自動添加前綴的配置文件
webpack.config.js：webpack的配置文件
這個是什么意思呢，就是我們把自己寫好的代碼分別放進app的css和js文件夾里，打包以后，webpack會自動的將代碼進行添加css3前綴、打包壓縮、ES6轉碼等全部搞定后，將處理好的代碼文件生成在dist的css和js里，我們在html里直接引用處理好以后的代碼就行。
demo實戰：
1、按上邊的目錄結構一一將文件新建好，node_modules除外。
2、編寫package.json，寫明需要安裝哪些依賴包，這些依賴包分別是干嘛的不一一說明了，想了解詳細的可以直接復制依賴包名稱去百度上搜。
{
"name": "webpack",
"version": "1.0.0",
"description": "webpack, es6, css autoprefixer",
"author": "liqiyuan",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.1",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.6.1",
"css-loader": "^0.28.1",
"extract-text-webpack-plugin": "^2.1.0",
"postcss-loader": "^2.0.5",
"style-loader": "^0.17.0",
"webpack": "^2.5.1"
}
}
3、編寫webpack.config.js
// ES6轉碼和打包打包
// module.exports = {
// entry: [
// 'babel-polyfill', // 添加了這個東西，才能完美的將ES6轉碼
// './app/js/index.js', // 進行轉碼的js文件1
// './app/js/index2.js', // 進行轉碼的js文件2
// ],
// output: {
// path: __dirname + '/dist/js', // 編譯后的js文件輸出目錄
// filename: 'bundle.js' // 編譯后的js文件名
// },
// module: {
// loaders: [
// {
// test: /\.jsx?$/,
// loader: 'babel-loader', // 'babel-loader'也可寫成'babel'
// query: {
// presets: ['env']
// }
// }
// ]
// }
// };
// CSS自動添加前綴並打包
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractCSS = new ExtractTextPlugin({
filename: './bundle.css', // 編譯后生成的css文件名
disable: false,
allChunks: true
});
module.exports = {
entry: {
app: ['./app/css/css-entry.js'], // 需要進行打包處理的css入口文件
},
output: {
path: __dirname + '/dist/css', // 編譯后生成的css文件輸出目錄
filename: 'css.js'
},
module: {
rules: [
{
test: /\.css$/,
use: extractCSS.extract({
fallback: "style-loader",
use: ['css-loader', 'postcss-loader']
})
}
]
},
plugins: [
extractCSS
]
}
4、根目錄下打開命令行窗口，輸入“cnpm install”，即可按照package.json的配置內容自動安裝所需插件（使用cnpm之前要先把淘寶鏡像安裝一下：npm install -g cnpm --registry=https://registry.npm.taobao.org），不然就用“npm install”。安裝完成后，根目錄下會生成一個文件夾node_modules，這就是安裝好的依賴包。
5、編輯postcss.config.js，這是css3自動添加前綴所需要的配置文件
module.exports = {
plugins: [
require('autoprefixer')({browsers:['last 5 versions']})
]
}
6、編輯app/css下面的css文件
index.css（css示例文件1）
index2.css（css示例文件2）
css-entry.js（css入口文件，即說明需要打包哪些css文件）
require('./index.css');
require('./index2.css');
7、命令行中輸入“webpack”。
8、神奇的情況發生，根目錄下會生成dist文件夾，dist下有css文件夾，css下有bundle.css，打開bundle.css：
發現木有，本來index.css和index2.css里的css3代碼是沒有加任何前綴的，打包以后css3前綴都已經給加好了。
9、打包js文件和es6轉碼：編輯app/js目錄下的index.js和index2.js，寫上es6代碼。再打開配置文件webpack.config.js，將 "ES6轉碼和打包" 部分代碼放開，將 "CSS自動添加前綴並打包" 部分代碼注釋掉，命令行里敲擊 "webpack"，打包完成后可以看見dist/js目錄下會生成一個bundle.js的文件，里面正是被打包和轉碼好的js代碼，可完美被IE9及以上的瀏覽器支持。
附上此例子的giuhub地址：https://github.com/Leeqly/webpack-es6-autoprefixer
可前往下載，然后直接cnpm install安裝好依賴包后就可以使用了。
順便提一下webpack幾個常用命令
webpack：普通打包
webpack -p：壓縮打包
webpack -p -w：監聽所有需要打包的代碼，只要有代碼被改動並保存后，就會自動進行打包