webpack作爲我們項目開發中廣發應用的一款模塊打包工具，如果你對它還不熟悉的話，如果你還停留在npm run dev的話，接下來就跟我一起來走近webpack，瞭解它，擁抱它，本文介紹的是webpack4的版本。
1. webpack的安裝
- 全局安裝
// webpack-cli 可以使webpack能夠被命令運行
npm install webpack webpack-cli -g
// 打包js
webpack xxx.js
- 局部安裝（全局安裝可能會使一些webpack3的項目無法運行，這裏推薦局部安裝）
// 1. 生成npm管理的項目
npm init -y
// 2. 安裝webpack webpack-cli
npm install webpack webpack-cli -D
// 運行webpack， webacpk已經被安裝到局部，使用npx命令
npx webpack xxx.js
2. webpack的打包entry，output
webpack默認的基礎配置文件是webpack.config.js,我們可以對這個文件做改造，從而達到我們的要求， 我們先實現一個最簡單的webpack打包配置
const path = require("path");
module.exports = {
// entry: './src/index.js', // 打包的入口文件
entry: {
main: './src/index.js', // 打包的入口文件
}
output: {
// publicPath: 'http://cdn.yumang.com.cn' // 靜態資源cdn引入
filename: '[name].js', // 輸入文件的名字
path: path.resolve(__dirname, 'dist') // 輸出文件目錄
}
}
至此一個簡單的打包配置就完成了，但這遠遠還不夠，我們接着深入吧
3. webpack-loaders
在我們的webpack中，webpack默認只能打包js文件，對於其他文件是無法解析的，此
時我們就要引出它的另一大核心概念loaders，接下來我們就用代碼看看怎麼解析css，scss圖片吧，首先在wepack.config.js 中新增module配置項，裏面可以配置rules是個數組。(loader 都是需要npm安裝的)
- 打包images url-loader file-loader
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader', // url-loader依賴file-loader 要一起安裝
options: {
name: '[name]_[hash].[ext]', // 輸入圖片名稱格式爲， 圖片名稱+ hash值 + 文件後綴
outputPath: 'images/', // 圖片會被打包到dist目錄的images目錄下
limit: 2048 // 文件小於2kb會以base64形式插入js中，並在頁面中顯示，大於2Kb會打包成圖片
}
}
]
}
]
}
- 打包css-scss在rules數組新增一項匹配規則
/**
在webpack中；loader的執行順序是從下往上，從右往左的，webpack解析scss，先用sass-loader解析scss文件成css文件，然後交給css-loader解析css。最後生成style嵌入head標籤中。注意sass-loader依賴node-sass要一起安裝
**/
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1 // 這個配置是當一個scss文件裏面引入了一個scss文件回回過頭從新往下執行一遍loader
}
},
'sass-loader',
]
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
4. webpack-plugins
至此， css，js ，images都打包了，可是它還沒有引入我們的頁面呀，怎麼引入頁面呢，接下來就講到plugins。 他們都需要被安裝（npm install）。
在我們的配置文件中新增一項plugins，它是個數組
// html-webpack-plugin 它會幫助我們在dist目錄新建一個html文件，然後把打包的資源都引入，當然它也可以指定html文件引入js
var HtmlWebpackPlugin = require("html-webpack-plugin");
// clean-webpack-plugin 它會在每次打包時清空dist目錄，然後重新生成
var {CleanWebpackPlugin} = require("clean-webpack-plugin");
module.export = {
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'}),
new CleanWebpackPlugin ()
]
}
5. webpack-dev-server
我們項目的雛形已經建立了，但是老鐵們有沒有發現我們每一次改變代碼，都需要重新打包，雖然webpack可以用–watch參數來幫我們監聽文件變化自動打包，但是我們前端開發中例如ajax請求，需要在服務器的狀態下請求，webpack-dev-server出現了，它可以監聽我們代碼變動自動打包，自動刷新頁面，啓動本地服務等等，美滋滋。接下來我們簡單講解下他的使用。
- 安裝
npm install webpack-dev-server -D
- webpack.config.js配置項新增
{
devServer: {
contentBase: path.join(__dirname, "dist"), // 指定服務映射目錄
compress: true,
port: 9000 // 啓動服務端口
},
}
- package.json配置script腳本，我們就可以npm run dev啓動項目了，是不是很熟悉啊
// package.json
{
"scripts": {
"dev": "webpack-dev-server"
},
}
至此一個粗略的簡單項目就運行起來了，靜待下期完善。