Get Started
- 安裝
- 運(yùn)行、轉(zhuǎn)譯js
- 轉(zhuǎn)譯html
- 轉(zhuǎn)譯css
- 預(yù)覽網(wǎng)頁
webpack
webpack可以：
①轉(zhuǎn)譯代碼（es6轉(zhuǎn)為es5,scss轉(zhuǎn)為css）
②構(gòu)建build
③代碼壓縮
④代碼分析
可以使用下列命令行查詢信息
npm info webpack version //查看版本號(hào)
npm info webpack //查看所有信息
1. 安裝
查詢文檔，在概覽（concepts）或?qū)Ш剑╣uides）中可以找到官方給出的下載命令行转锈。
mkdir webpack-demo // 新建目錄
cd webpack-demo // 打開
npm init -y // 初始化搁宾，得到一個(gè)package.json文件
npm install webpack@4.x webpack-cli@3.x --save-dev // 按照版本安裝（本地）并生成兩個(gè)文件: ①是node_modules; ②是package-lock.json文件.
用yarn也可以隆圆，在這里我使用的是yarn add webpack@4 webpack-cli@3 --dev沾歪。
2. 運(yùn)行、轉(zhuǎn)譯js
如何使用本地安裝的webpack
npx webpack //npx在windows不夠穩(wěn)定 如果安裝node_modules里面有空格的話 可能會(huì)不起作用
// 或者是
./node_modules/.bin/webpack --version //當(dāng)npx不能用的時(shí)候霹粥，可以退回這種手動(dòng)找路徑的方式
執(zhí)行npx webpack 時(shí)運(yùn)行警告解決方法
執(zhí)行npx webpack后可能會(huì)出現(xiàn)這樣的警告。
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
or. Learn more: https://webpack.js.org/configuration/mode/
我們可以看出這個(gè)警告是與配置有關(guān)疼鸟，并且是關(guān)于mode這個(gè)選項(xiàng)沒有設(shè)置后控。
首先查看官方文檔查找關(guān)于configuration的信息，按照文檔給出的方法創(chuàng)建webpack.config.js空镜。然后在文件里寫入以下內(nèi)容：
var path = require('path');
module.exports = {
mode: 'development', // 這是開發(fā)者模式浩淘，此外還有production模式
entry: './foo.js', // entry，用來設(shè)置想要轉(zhuǎn)譯代碼的文件
output: {
path: path.resolve(__dirname, 'dist'), // 默認(rèn)dist目錄
filename: 'foo.bundle.js' // output吴攒，轉(zhuǎn)譯后生成的文件张抄，可以設(shè)置文件名
}
};
我們可以使用filename: '[name].[contenthash].js'自動(dòng)生成一個(gè)新的不重名的文件。
指令簡化
每次都要生成新的 js 文件舶斧，越積越多欣鳖，所以需要使用rm rf dist; npx webpack刪掉dist目錄再重新打包。
但是這樣的命令又太長了茴厉，每次用起來麻煩泽台，我們可以在 package.json 文件的 scripts 方法里面增加上"build":"rm -rf dist && webpack"，運(yùn)行 yarn build 或者 npm run build 即可矾缓。
3. 轉(zhuǎn)譯html
根據(jù)官方中文手冊：https://webpack.docschina.org/plugins/html-webpack-plugin/
首先加載插件怀酷。
npm install --save-dev html-webpack-plugin
// 或
yarn add html-webpack-plugin --dev
然后在webpack的js文件中添加以下代碼，生成一個(gè)html文件嗜闻。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js',
},
plugins: [new HtmlWebpackPlugin()],
};
我們只是要生成html蜕依，所以只留HtmlWebpackPlugin與export中的plugins: [new HtmlWebpackPlugin()],。運(yùn)行yarn build，就會(huì)在dist中生成一個(gè)html文件样眠。
插件配置
https://github.com/jantimon/html-webpack-plugin#options
在官方手冊中打開插件配置可以找到所有設(shè)置還有例子友瘤。
圖中使用的是title和template。
title
替換生成html中的標(biāo)題名檐束，需要將模板中的標(biāo)題名換成<title><%= htmlWebpackPlugin.options.title %></title>
template
以該路徑的模板生成一個(gè)html辫秧，這個(gè)模板需要提前設(shè)置好，不然空模板只會(huì)生成一串script標(biāo)簽被丧。
4. 轉(zhuǎn)譯css
與轉(zhuǎn)譯 html 步驟相似盟戏，通過查詢官方文檔下載插件及配置，不過這里需要注意的是 css-loader 需要與 style-loader 一起使用（兩個(gè)都要下載）甥桂。
css-loader 將 css 文件引入到 js 中柿究，style-loader 則是將其轉(zhuǎn)為 style 標(biāo)簽插入到 head 標(biāo)簽里。
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
}
css抽出文件
除了將 css 放進(jìn) style 標(biāo)簽插入 html黄选，還可以將 css 內(nèi)容打包抽出蝇摸，再在 html 里引入 css 文件，這個(gè)時(shí)候就要用到MiniCssExtractPlugin這個(gè)插件了糕簿。
還是跟上面一樣下載并且配置探入。
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "../",
},
},
"css-loader",
],
},
],
},
5. 實(shí)時(shí)預(yù)覽網(wǎng)頁
下載插件 webpack-dev-server 并配置，在 package.json 的 scripts 方法里添加 "start": "webpack-dev-server" 懂诗，簡化指令就可以使用 yarn start 來開啟預(yù)覽了蜂嗽。
mode 切換
mode的使用一半分為為開發(fā)者提供的 development 和生產(chǎn)（打包）用的 production。
想分別使用
(1)
在文件內(nèi)設(shè)置標(biāo)識(shí)(if( TARGET === 'start' )殃恒、if( TARGET === 'build' ))植旧，根據(jù)指令來分別是哪種模式，再根據(jù)模式進(jìn)行不同的操作离唐。
(2)
也可以創(chuàng)建一個(gè)基礎(chǔ)的通用文件（webpack.config.common.js）病附，再分別創(chuàng)建兩種模式單獨(dú)使用的文件，并在其中的設(shè)置中調(diào)用通用文件的配置（...common）亥鬓。使用指令時(shí)還需要在 package.json 文件中添加"build": "rm -rf dist && webpack --config webpack.config.prod.js",來區(qū)分調(diào)用文件完沪。
