前言：
webpack4出了以後，一些插件變化很大，和之前的版本使用方式不一樣，新手入坑，本篇将介紹如何從一開始配置webpack4的開發版本，
對css，js進行編譯打包合并生成md5，CSS中的圖檔處理， js自動注入html頁 ，删除指定檔案， 提取公共檔案，
熱更新等等。
安裝
//全局安裝
npm install -g webpack webpack-cli
複制代碼 建立檔案夾初始化
//建立檔案夾
mkdir webpack4demo
//進入
cd webpack4demo
//初始化
npm init -y複制代碼 建立檔案夾scripts 裡面建立index.js檔案
index.js
const s=()=>{
console.log('s init')
}
s()複制代碼 建立webpack.config.js檔案
webpack.config.js
const path = require("path");
module.exports = {
entry: {
index: "./scripts/index.js" //入口檔案，若不配置webpack4将自動查找src目錄下的index.js檔案
},
output: {
filename: "[name].bundle.js",//輸出檔案名，[name]表示入口檔案js名
path: path.join(__dirname, "dist")//輸出檔案路徑
}
}
複制代碼 執行webpack --mode development将會生成dist/index.bundle.js
建立index.html，并引入js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
$END$
</body>
<script src="./dist/index.bundle.js"></script>
</html>複制代碼 打開浏覽器将會看到之前設定的js檔案生效
對css，js進行編譯打包合并生成md5
建立a.js，c.js，a.css，更改index.js
a.js
import acss from './a.css'
import c from './c.js'
const a={
init(){
console.log("a init bbbaaa")
},
cinit(){
c.init()
}
}
export default a;複制代碼 c.js
const c={
init(){
console.log("ccccc")
}
}
export default c;複制代碼 a.css
body{
background-color: #6b0392;
}複制代碼 import a from './a.js'
import c from './c.js'
const s=()=>{
a.init()
a.cinit()
c.init()
console.log('s init')
}
s()複制代碼 配置webpack.config.js檔案
const path = require("path");
module.exports = {
entry: {
index: "./scripts/index.js"
},
output: {
filename: "[name].bundle.[hash].js",//[hash]會在後面生成随機hash值
path: path.join(__dirname, "dist")
},
module: { // 處理對應子產品
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]//處理css
}
]
},
}複制代碼 安裝style-loader， css-loader
npm install style-loader css-loader --save-dev
複制代碼 執行
webpack --mode development
将會看到一個帶md5值得js檔案，将他引入html中
CSS中的圖檔處理
安裝url-loader, file-loader
npm install url-loader file-loader --save-dev
複制代碼 body{
background-image: url("./timg.jpg");
background-color: #a748ca;
}複制代碼 module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{
outputPath:'images/',//輸出到images檔案夾
limit:500 //是把小于500B的檔案打成Base64的格式，寫入JS
}
}]
}
]
},複制代碼 webpack --mode development
将會看到dist中有一個images檔案夾中有一張圖檔，打開index.html
js自動注入html檔案
使用插件html-webpack-plugin，可以将生成的js自動引入html頁面，不用手動添加
//安裝html-webpack-plugin
npm install html-webpack-plugin --save-dev
//安裝webpack webpack-cli
npm install webpack webpack-cli --save-dev
複制代碼 const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin
module.exports = {
entry: {
index: "./scripts/index.js"
},
output: {
filename: "[name].bundle.[hash].js",
path: path.join(__dirname, "dist")
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
plugins: [// 對應的插件
new HtmlWebpackPlugin({ //配置
filename: 'index.html',//輸出檔案名
template: './index.html',//以目前目錄下的index.html檔案為模闆生成dist/index.html檔案
}),
]
}複制代碼 webpack --mode development
記得要講之前手動引入的script删除，便可以看到dist那裡自動生成一個index.html，打開便可以看到。
删除指定檔案
使用插件clean-webpack-plugin，删除指定檔案，更多配置，檢視
clean-webpack-pluginnpm install clean-webpack-plugin --save-dev複制代碼 const CleanWebpackPlugin = require('clean-webpack-plugin');//引入
plugins: [// 對應的插件
new HtmlWebpackPlugin({ //配置
filename: 'index.html',//輸出檔案名
template: './index.html',//以目前目錄下的index.html檔案為模闆生成dist/index.html檔案
}),
new CleanWebpackPlugin(['dist']), //傳入數組,指定要删除的目錄
]複制代碼 webpack --mode development，
可以看到dist目錄被删除，又生成一個新的dist，之前的js檔案已經被删除。
我們可看到a.js和index.js都引入了c.js檔案，為什麼要提取公共代碼，簡單來說，就是減少代碼備援，提高加載速度。和之前的webpack配置不一樣：
//之前配置
// new webpack.optimize.SplitChunksPlugin({
// name: 'common', // 如果還要提取公共代碼,在建立一個執行個體
// minChunks: 2, //重複兩次之後就提取出來
// chunks: ['index', 'a'] // 指定提取範圍
// }),
//現在配置
optimization: {
splitChunks: {
cacheGroups: {
commons: { // 抽離自己寫的公共代碼
chunks: "initial",
name: "common", // 打包後的檔案名，任意命名
minChunks: 2,//最小引用2次
minSize: 0 // 隻要超出0位元組就生成一個新包
},
vendor: { // 抽離第三方插件
test: /node_modules/, // 指定是node_modules下的第三方包
chunks: 'initial',
name: 'vendor', // 打包後的檔案名，任意命名
// 設定優先級，防止和自定義的公共代碼提取時被覆寫，不進行打包
priority: 10
},
}
}
},
複制代碼 下載下傳jq
npm install jquery --save
在a.js，index.js引用
import $ from 'jquery'
輸出$
生成3個js檔案，執行
webpack --mode development
熱更新，自動重新整理
我們将用到
webpack-dev-serve
webpack-dev-server
就是一個基于
Node.js
和
webpack
的一個小型伺服器，它有強大的
自動重新整理 熱替換功能。
webpack-dev-serve
npm install webpack-dev-serve --save-dev複制代碼 const webpack = require("webpack");
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html',
}),
new CleanWebpackPlugin(['dist']), //傳入數組,指定要删除的目錄
// 熱更新，熱更新不是重新整理
new webpack.HotModuleReplacementPlugin()
],
devServer: {//配置此靜态檔案伺服器，可以用來預覽打包後項目
inline:true,//打包後加入一個websocket用戶端
hot:true,//熱加載
contentBase: path.resolve(__dirname, 'dist'),//開發服務運作時的檔案根目錄
host: 'localhost',//主機位址
port: 9090,//端口号
compress: true//開發伺服器是否啟動gzip等壓縮
},複制代碼 配置package.json
"scripts": {
"dev": "webpack-dev-server --mode development"
},複制代碼 npm run dev
通路
http://localhost:9090/
随便修改任一檔案便會自動重新整理網站顯示修改相應内容。
總結：
webpack4還有很多很多配置，例如css的拆分呀，less sass配置呀，js編譯es6呀，多入口配置呀，生産環境配置，js沒有使用的子產品自動檢測剝離等等，隻能等下次有空在總結，感謝大家的觀看，新手入坑，歡迎指出錯誤的地方。
原文釋出時間為：2018年06月22日
原文作者：eternalless
本文來源：
掘金 https://juejin.im/post/5b123ace6fb9a01e6f560a4b如需轉載請聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)