接觸webpack也有挺長一段時間了，公司的項目也是一直用着webpack在打包處理，但前幾天在教新人的狀況下，遇到了一個問題，那就是：儘管網上的webpack教程滿天飛，可是卻很難找到一個能讓新人快速入手的、接地氣的、傻瓜式的教程，本身手把手教又太浪費時間。想了一想，決定本身寫一篇webpack的傻瓜式教程，旨在教會還沒有了解webpack的人迅速入手懂得基本原理，而不是懵逼一昧用着老員工搭好的環境每天敲着「webpack -p -w」殊不知這究竟是幹嗎的。javascript
對於webpack的概念、用途、好處等等一概省略，想了解的上網搜索便可，這裏直接演示如何新建一個webpack的實例。css
一、安裝好nodejs，安裝過程網上找。html
二、在D盤、E盤或任意一個磁盤中新建文件夾，命名爲webpack_demo：前端
三、在webpack_demo文件下按住Shift鍵後點擊鼠標右鍵，再左鍵點擊「在此處打開命令行窗口」：java
在打開的命令行窗口中鍵入：node
npm init
name表示項目名，version表示版本等等，不一一贅述了，看字段很容易明白，一一填完或直接一路按回車鍵，最後出現「is this ok？」時，敲擊回車鍵後webpack_demo的文件夾下便生成了package.json文件。jquery
四、在命令行中分別執行如下命令，安裝對應的插件（--save-dev做用是安裝的插件的同時，將插件名寫入package.json的devDependencies列表中）：webpack
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步驟中手動添加而成）：css3
{
"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"
}
}
五、此時查看webpack_demo文件夾，會發現多出了一個文件夾：git
雙擊打開，文件夾下的內容以下：
說明所須要的插件都已安裝成功。
六、在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。
七、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。
八、新建上一步中對應路徑的css、js、index、common文件夾，裏面分別新建對應的css或js文件，每一個css、js文件裏寫入不一樣的代碼。
九、窗口命令行中執行代碼：
webpack
出現以下提示索命打包成功：
此時打開webpack_demo文件夾，發現多了dist文件夾，打開，裏面文件以下：
十、新建一個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，但其實它的用法遠不只如此，這裏再說兩個常見的用法：
一、自動加css3前綴。
咱們在寫一些css3的樣式時，爲了良好的兼容性，每每會把css3代碼寫成以下這個樣子：
.test{
display: flex;
display: -webkit-box;
display: -ms-flexbox;
}
若是每一個css3的代碼都要手動寫一堆前綴，那不只要奔潰還容易出錯，這種事情仍是交給工具來幹，會效率和靠譜的多。
二、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實戰：
一、按上邊的目錄結構一一將文件新建好，node_modules除外。
二、編寫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"
}
}
三、編寫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
]
}
四、根目錄下打開命令行窗口，輸入「cnpm install」，便可按照package.json的配置內容自動安裝所需插件（使用cnpm以前要先把淘寶鏡像安裝一下：npm install -g cnpm --registry=https://registry.npm.taobao.org），否則就用「npm install」。安裝完成後，根目錄下會生成一個文件夾node_modules，這就是安裝好的依賴包。
五、編輯postcss.config.js，這是css3自動添加前綴所須要的配置文件
module.exports = {
plugins: [
require('autoprefixer')({browsers:['last 5 versions']})
]
}
六、編輯app/css下面的css文件
index.css（css示例文件1）
index2.css（css示例文件2）
css-entry.js（css入口文件，即說明須要打包哪些css文件）
require('./index.css');
require('./index2.css');
七、命令行中輸入「webpack」。
八、神奇的狀況發生，根目錄下會生成dist文件夾，dist下有css文件夾，css下有bundle.css，打開bundle.css：
發現木有，原本index.css和index2.css裏的css3代碼是沒有加任何前綴的，打包之後css3前綴都已經給加好了。
九、打包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：監聽全部須要打包的代碼，只要有代碼被改動並保存後，就會自動進行打包