一、開(kāi)始
安裝
# 安裝最新穩(wěn)定版本
npm i -D webpack
# 安裝指定版本
npm i -D webpack@<version>
# 安裝最新的體驗(yàn)版本
npm i -D webpack@beta
# 全局安裝
npm i -g webpack
npm i -D 是 npm install --save-dev 的縮寫(xiě)
創(chuàng)建文件
先構(gòu)建基礎(chǔ)的js和html文件：
- 頁(yè)面入口文件 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-test</title>
</head>
<body>
<div id="app">
<!-- 導(dǎo)入打包好的文件 -->
<script src="./dist/bundle.js"></script>
</div>
</body>
</html>
- 工具函數(shù) show.js
// 操作 DOM 元素，把 content 顯示到網(wǎng)頁(yè)上
function show(content) {
window.document.getElementById('app').innerText = 'Hello,' + content;
}
// 通過(guò) CommonJS 規(guī)范導(dǎo)出 show 函數(shù)
module.exports = show;
- 執(zhí)行入口 main.js
// 通過(guò) CommonJS 規(guī)范導(dǎo)入 css 模塊
require('./main.css');
// 通過(guò) CommonJS 規(guī)范導(dǎo)入 show 函數(shù)
const show = require('./show.js');
// 執(zhí)行 show 函數(shù)
show('Webpack');
- wbbpack在執(zhí)行構(gòu)建時(shí)默認(rèn)會(huì)從項(xiàng)目根目錄
webpack.config.js文件讀取配置信息，內(nèi)容如下：
const path = require('path');
module.exports = {
// JS 執(zhí)行入口文件
entry: './main.js',
output: {
// 把所有依賴的模塊合并輸出到一個(gè) bundle.js 文件
filename: 'bundle.js',
// 輸出文件都放到 dist 目錄下
path: path.resolve(__dirname, './dist'),
},
module: {
rules: [
{
// 用正則去匹配要用該 loader 轉(zhuǎn)換的 css 文件
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
}
]
}
};
運(yùn)行webpack構(gòu)建會(huì)生成
bundle.js，為打包好的文件，包含了main.js、show.js等模塊
測(cè)試
此時(shí)的package.json
{
"name": "dive-into-webpack",
"version": "1.0.0",
"scripts": {
"build": "webpack"
},
"dependencies": {},
"devDependencies": {
"css-loader": "^0.28.4",
"style-loader": "^0.18.2",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0"
}
}
執(zhí)行：
npm run build
報(bào)錯(cuò)：
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
- webpack-cli (https://github.com/webpack/webpack-cli)
The original webpack full-featured CLI.
- webpack-command (https://github.com/webpack-contrib/webpack-command)
A lightweight, opinionated webpack CLI.
We will use "npm" to install the CLI via "npm install -D".
這里提示安裝 webpack-cli
是因?yàn)榈搅藈ebpack4, webpack 已經(jīng)將 webpack 命令行相關(guān)的內(nèi)容都遷移到webpack-cli，所以除了 webpack 外，我們還需要安裝 webpack-cli：
npm i -D webpack-cli
重新執(zhí)行：
npm run build
此時(shí)生成dist文件夾，里面為
bundle.js文件
在瀏覽器內(nèi)打開(kāi)index.html文件可以看到
Hello,Webpack
使用 DevServer
提供HTTP服務(wù)
監(jiān)聽(tīng)文件變化自動(dòng)刷新，實(shí)時(shí)預(yù)覽
支持Source Map
安裝 DevServer
npm i -D webpack-dev-server
執(zhí)行 DevServer
在 package.json 里添加
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
},
運(yùn)行
npm run dev
此時(shí)提示：
Project is running at http://localhost:8080/
webpack output is served from /
注意：
此時(shí)我們刪除之前使用webpack構(gòu)建的
dist靜態(tài)目錄
在瀏覽器訪問(wèn)http://localhost:8080/就可以打開(kāi)index.html為空白，因?yàn)槁窂揭呀?jīng)不是./dist/bundle.js，DevServer會(huì)將Webpack構(gòu)建的文件存在內(nèi)存中，跳過(guò)webpack.config.js的output.path屬性，所以更改為直接訪問(wèn)./bundle.js
測(cè)試 DevServer
此時(shí)修改
main.js、show.js等文件，保存后瀏覽器就自動(dòng)刷新，運(yùn)行處修改后的結(jié)果
核心
在 webpack中文文檔 中第一部分有詳細(xì)的敘述，可以了解一下它的6個(gè)核心配置項(xiàng)：
Entry、Module、Chunk、Loader、Plugin、Output
二、實(shí)戰(zhàn)
使用CSS和CSS預(yù)處理語(yǔ)言
配置Loader
下面的代碼是從右到左依次適配的
loader: 'style-loader!css-loader!less-loader'
使用 CSS 和 LESS
npm i -D style-loader css-loader
npm i -D less-loader less
在 webpack.config.js rules里添加
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
測(cè)試
新建
main.less文件
在main.js中引入
require('./main.less');
寫(xiě)入樣式
<style>
#app {
background: gray;
p{
color: red;
}
}
</style>
啟動(dòng)后查看界面效果
使用 SASS
使用SASS（SCSS）需要安裝
node-sass，node-sass核心使用C++編寫(xiě)，在用Node.js封裝了一層，以提供其他Node.js調(diào)用
先全局安裝
npm i -g node-sass
再執(zhí)行編譯命令
# 將 main.scss 源文件編譯成 main.css
node-sass main.scss main.css
/
在 webpack.config.js rules里添加
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}
css壓縮打包（測(cè)試失敗，研究后發(fā)現(xiàn)4.x貌似不需要這些了，之前3.x之類使用的都無(wú)效了）
安裝 mini-css-extract-plugin
# webpack4.x 使用 mini-css-extract-plugin
npm i -D mini-css-extract-plugin css-loader
在 webpack.config.js 中設(shè)置配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
...
plugins: [
...
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
使用ES6
Babel
Babel是一個(gè)javascript編輯器，能將ES6代碼轉(zhuǎn)換為ES5代碼，會(huì)從根目錄下的.babelrc文件讀取配置，為JSON格式的文件，例如：
{
"presets": ["env"],
"plugins": [
[
"transform-runtime",
{
"polyfill": false
}
]
]
}
env自動(dòng)匹配所有的最新語(yǔ)法 替代之前的es2015寫(xiě)法
配置項(xiàng)
Plugins
告訴Babel要使哪些插件，這些插件可以控制如何控制轉(zhuǎn)換代碼，例如安裝
transform-runtime插件，全名babel-plugin-transform-runtime，此插件作用是減少冗余代碼
npm i -D babel-plugin-transform-runtime
Presets
告訴Babel要轉(zhuǎn)換的源碼使用了哪些新的語(yǔ)法特性，例如：
es2015
npm i -D babel-preset-es2015
接入Babel
在webpack配置rules添加
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
添加devtool
# 輸出 source-map 以方便直接調(diào)試 ES6 源碼
devtool: 'inline-source-map'
安裝所需依賴
# Webpack 接入 Babel 必須依賴的模塊
npm i -D babel-core babel-loader
# 根據(jù)我們的需求選擇不同的 Plugins 或者 Presets
npm i -D babel-preset-env
# 安裝 es2015
npm i -D babel-preset-es2015
測(cè)試
之前使用
CommonJS規(guī)范進(jìn)行模塊的引入和導(dǎo)出，現(xiàn)在更改為ES6規(guī)范
main.js
// 通過(guò) ES6 規(guī)范導(dǎo)入 css 模塊
import './main.css';
import './main.less';
// 通過(guò) ES6 模塊化規(guī)范導(dǎo)入 show 函數(shù)
import { show } from './show';
// 執(zhí)行 show 函數(shù)
show('Webpack');
show.js
// 操作 DOM 元素，把 content 顯示到網(wǎng)頁(yè)上
export function show(content) {
window.document.getElementById('app').innerText = `Hello,${content}`;
}
其中
`Hello,${content}`為ES6語(yǔ)法，然后啟動(dòng)運(yùn)行，效果同'Hello,' + content
