This time I will bring you a detailed explanation of the webpack plug-in. What are the precautions for using the webpack plug-in? The following is a practical case, let's take a look.

1. Automatically build HTML, compress spaces, and add version numbers or random numbers to referenced js: html-webpack-plugin

2. Process CSS: css-loader and style-loader
3. Processing LESS: less-loade and less
4. Extract css code into css file: extract-text-webpack-plugin
5. Server construction in development environment: webpack-dev-server
6. Parse the ES6 code: babel-core babel-preset-env babel-loader
7. Parse the new object functions of ES6: babel-polyfill
8. Parse the jsx syntax of react: babel-preset-react
9. Convert relative path to absolute path: nodejs path module
10. Add hash value to the file: [chunkhash], [hash]
11. Clear the output file before the output folder: clean-webpack-plugin
12. Module hot replacement: NamedModulesPlugin and HotModuleReplacementPlugin
13. Environment variables
14. Cross-platform use of environment variables: cross-env
15. Processing image paths: file-loader and html-loader
16. Image compression: image-webpack-loader
17. Locate source file code: source-map
18. Separate the production environment and development environment
Configuration file

1. Automatically build HTML, compress spaces, and add version numbers or random numbers to referenced js: html-webpack-plugin

Solution: Use the plug-in html-webpack-plugin

webpack.config.js is as follows:

module.exports?=?{
??entry:?'./src/app.js',
??output:?{
????path:?dirname?+?'/dist',
????filename:?'app.bundle.js'
??},
??plugins:?[new?HtmlWebpackPlugin({
????template:?'./src/模板文件.html',
????filename:?'構(gòu)建的.html',
????minify:?{
??????collapseWhitespace:?true,
????},
????hash:?true,
??})]
};

Pay attention to the path, because the output html needs to know the output directory

2. Process CSS: css-loader and style-loader

Loader is used to preprocess and convert the source code of the module.

Solution: Use css-loader, style-loader

Look at the project structure:

Running the webpack command at this time will throw an error:

Next install css-loader and style-loader

npm?install?--save-dev?css-loader?style-loader

Then modify webpack.config.js to:

The rules array is the array of rules used by the loader to match and convert resources.

test represents the
regular expression that matches the file to be converted, and the figure shows that it matches all files ending with css. The use array represents which loaders are used to process these matched files.

Run webpack again at this time, and the packaged file bundle.js will contain css code.

The css-loader is responsible for loading css and packaging css into js.
The style-loader is responsible for generating: when js is running, the css code is injected into the dom through the style tag.

3. Processing LESS: less-loade and less

Solution: Use less-loader

But using less-loader just converts LESS code into css code. If you want to package files into js, ??you still need to use the css-loader and style-loader mentioned above.

Look at the project structure:

Then the code of app.js is:

import?styles?from?'./app.less';
console.info('我是一個(gè)js文件123')

In order to solve this situation, you must first install less-loader , and less-loader is based on less, so less must also be installed.

npm?i?--save-dev?less?less-loader

Modify webpack.config.js to:

module:?{
??rules:?[
????{
??????test:?/\.less$/,
??????use:?[?'style-loader',?'css-loader',?'less-loader'?]
????}
??]
}

4. Extract css code into css file: extract-text-webpack-plugin

Many times we want The effect is not to process several LESS or CSS and package them into a js, but to package them into a css file.

The plugin extract-text-webpack-plugin is now available.
First install

npm?i?--save-dev?extract-text-webpack-plugin

Then modify webpack.config.js to:

與原配置對(duì)比可以發(fā)現(xiàn)，比html-webpack-plugin這個(gè)插件多做了一步，就是在匹配和轉(zhuǎn)換規(guī)則里面的use中使用了ExtractTextPlugin.extract。
注意這里的fallback表示，在提取文件失敗后，將繼續(xù)使用style-loader去打包到j(luò)s中。
此時(shí)運(yùn)行webpack
可以發(fā)現(xiàn)輸出目錄build下生成了一個(gè)style.css文件，也就是我們?cè)趙ebpack.config.js中期望生成的文件，并且在生成的demo.html中被引用了。

5.開發(fā)環(huán)境下的服務(wù)器搭建：webpack-dev-server

webpack-dev-server可以在本地搭建一個(gè)簡(jiǎn)單的開發(fā)環(huán)境用的服務(wù)器，自動(dòng)打開瀏覽器，而且還可以達(dá)到webpack -watch的效果。
首先安裝一下：

npm?i?-g??webpack-dev-server
npm?i?--save-dev?webpack-dev-server

這里不需要改動(dòng)webpack.config.js，直接運(yùn)行命令

webpack-dev-server

查看Detailed explanation of webpack plug-ins：

顯示項(xiàng)目運(yùn)行在http://localhost:8080/
webpack的輸出目錄的路徑在/下面
并且這個(gè)服務(wù)器會(huì)自動(dòng)識(shí)別輸出目錄下名為index的HTML文件，而我們之前輸出的文件名為demo.html。
所以還需要將之前html-webpack-plugin中配置的filename改為index.html，或者直接用http://localhost:8080/demo.html也行。
當(dāng)我們修改了源代碼后，打開的網(wǎng)頁(yè)還會(huì)自動(dòng)更新。

為了更靈活的應(yīng)用開發(fā)環(huán)境的服務(wù)器，也可以在webpack.config.js中加入如下代碼：

devServer配置	功能
port	修改端口為8787，而不是默認(rèn)的8080。
open	為true表示會(huì)自動(dòng)打開瀏覽器，而不是需要我們?cè)偈謩?dòng)打開瀏覽器并在里面輸入http://localhost:8080。
compress	對(duì)本地server返回的文件提供gzip壓縮
index	指定網(wǎng)站首頁(yè)映射的文件，默認(rèn)為index.html

6.解析ES6代碼：babel-core babel-preset-env babel-loader

這里說(shuō)是ES6，實(shí)際上可以認(rèn)為是ECMAScript的高版本代碼，只是代指而已。
babel的作用是將瀏覽器還未支持的這些高版本js代碼轉(zhuǎn)換成可以被指定瀏覽器支持的js代碼。

這里列出可以轉(zhuǎn)換的大致語(yǔ)法：

那么首先就需要安裝babel

npm?install?babel-core?babel-preset-env?--save-dev

然后，為了和webpack結(jié)合起來(lái)，要用到babel-loader

npm?install?babel-loader?--save-dev

然后在webpack.config.js的rules數(shù)組中增加以下代碼：

{
??test:?/\.js$/,
??exclude:?/(node_modules)/,
??use:?{
????loader:?'babel-loader',
????options:?{
??????presets:?['env']
????}
??}
}

這行代碼的意思是用babel-loader解析除了node_modules文件下的所有js文件。
而babel-loader就是用babel去解析js代碼。
options的內(nèi)容類似于.babelrc文件的配置，有了這個(gè)就不需要.babelrc文件了。
presets表示預(yù)處理器，現(xiàn)在的babel不像以前需要很多預(yù)處理器了，只需要env這一個(gè)就夠了。

修改之前的app.js中的代碼為：

console.info('我是一個(gè)js文件123')
const?doSomething=()?=>?{
??console.info('do?do?do')
}

使用webpack命令后，可以看到我們最后的打包js文件中代碼變成了這樣：

7.解析ES6新增的對(duì)象函數(shù)：babel-polyfill

以下為這些新增函數(shù)：

安裝：

npm?install?--save-dev?babel-polyfill

為了確保babel-polyfill被最先加載和解析，所以一般都是講babel-polyfill在最開始的腳本中引入。
而在webpack中，就是在放到entry中，所以需要修改webpack.config.js中的配置為：

8.解析react的jsx語(yǔ)法：babel-preset-react

安裝

npm?install?--save-dev?babel-preset-react

配置：

這里是匹配所有以js或者jsx結(jié)尾的文件，并用 babel-preset-env和babel-preset-react進(jìn)行解析

9.轉(zhuǎn)換相對(duì)路徑到絕度路徑：nodejs的path模塊

這里首先介紹一下nodejs的path模塊的一個(gè)功能：resolve。
將相對(duì)路徑轉(zhuǎn)換為絕對(duì)路徑。
在最開始引用path模塊

var?path?=?require('path')；

然后可以在輸出設(shè)置那里修改代碼為：

??output:?{
????path:?path.resolve(dirname,?'build'),
????filename:?'bundle.js'
??},

和我們?cè)瓉?lái)的代碼沒(méi)有任何區(qū)別。

10.給文件加上hash值：[chunkhash],[hash]

hash和chunkhash有區(qū)別，hash的話輸出的文件用的都是同一個(gè)hash值，而chunkhash的話是根據(jù)模塊來(lái)計(jì)算的，每個(gè)輸出文件的hash值都不一樣。
直接將輸出文件改為

output:?{
??path:?path.resolve(dirname,?'build'),
??filename:?'bundle.[chunkhash].js'
},

[chunkhash]就代表一串隨機(jī)的hash值

11.清空輸出文件夾之前的輸出文件：clean-webpack-plugin

當(dāng)我們像上面一樣不斷改變輸出文件時(shí)，之前的輸出文件并沒(méi)有去掉。
為了解決這個(gè)問(wèn)題就需要clean-webpack-plugin。
首先安裝

npm?i?clean-webpack-plugin?--save-dev

然后引用插件，并聲明每次生成輸出需要清空的文件夾

var?CleanWebpackPlugin?=?require('clean-webpack-plugin');
var?pathsToClean?=?[
??'build',
]

再在插件配置中加入：

new?CleanWebpackPlugin(pathsToClean)

12.模塊熱替換：NamedModulesPlugin和HotModuleReplacementPlugin

之前的webpack-dev-server提供了監(jiān)聽(tīng)功能，只要代碼改變，瀏覽器就會(huì)刷新。
但是模塊熱替換是不會(huì)刷新瀏覽器，只刷新修改到的那部分模塊。
模塊熱替換無(wú)需安裝。
首先需要引入模塊

var?webpack?=?require('webpack')

其實(shí)插件中加入：

new?webpack.NamedModulesPlugin(),
new?webpack.HotModuleReplacementPlugin()

此時(shí)運(yùn)行webpack可能會(huì)報(bào)錯(cuò)，我們需要把之前在輸出環(huán)境中寫的[chunkhash]改為[hash]

13.環(huán)境變量

可以在腳本中這么寫：

"scripts": {
"dev": "webpack-dev-server",
"prod": "set NODE_ENV=production && webpack -p"
},

這樣在webpack.config.js中這樣修改上面的東西：

if?(isProduction)?{
????config.output.filename?=?'bundle.[chunkhash].js'
}?else?{
????config.plugins.push(new?webpack.NamedModulesPlugin())
????config.plugins.push(new?webpack.HotModuleReplacementPlugin())
}

這樣就可以根據(jù)環(huán)境的不同來(lái)運(yùn)行不同的配置

14.跨平臺(tái)使用環(huán)境變量: cross-env

上述設(shè)置環(huán)境變量的腳本中只有在window下才有效，在linux和mac上需要使用

"prod":?"NODE_ENV=production?webpack?-p"

為了解決這個(gè)問(wèn)題，使得不同平臺(tái)的人能公用一套代碼，我們可以使用cross-env。
首先進(jìn)行安裝：

npm?i?--save-dev?cross-env

然后命令直接使用類似于mac上的用法即可

"prod":?"cross-env?NODE_ENV=production?webpack?-p"

15.處理圖片路徑: file-loader和html-loader

file-loader可以用來(lái)處理圖片和字體文件在css文件中的路徑問(wèn)題，輸出的css文件中會(huì)引用輸出的文件地址。
html-loader可以用來(lái)處理html中，比如img元素的圖片路徑問(wèn)題。
首先安裝

npm?i?--save-dev?file-loader?html-loader

配置：

????????{
????????????test:?/\.(gif|png|jpe?g|svg)$/i,
????????????use:?{
????????????????loader:?'file-loader',
????????????????options:?{
????????????????????name:?'[name].[ext]',
????????????????????outputPath:?'src/images/'
????????????????}
????????????}
????????},
????????{
????????????test:?/\.html$/,
????????????use:?[{
????????????????loader:?'html-loader',
????????????????options:?{
????????????????????minimize:?true
????????????????}
????????????}],
????????}

16.圖片壓縮：image-webpack-loader

安裝：

npm?i?--save-dev?image-webpack-loader

配置：

????{
????????????test:?/\.(gif|png|jpe?g|svg)$/i,
????????????use:?[{
????????????????????loader:?'file-loader',
????????????????????options:?{
????????????????????????name:?'[name].[ext]',
????????????????????????outputPath:?'images/'
????????????????????}
????????????????},
????????????????{
????????????????????loader:?'image-webpack-loader',
????????????????????options:?{
????????????????????????bypassOnDebug:?true,
????????????????????}
????????????????}
????????????]
????????},

這里的options中也可以具體配置各個(gè)圖片類型的壓縮質(zhì)量

17.定位源文件代碼：source-map

如果我們用web-dev-server運(yùn)行我們的輸出文件，發(fā)現(xiàn)其中有些BUG，然后打開開發(fā)者工具取定位文件的時(shí)候，只會(huì)定位到我們的輸出文件。
而這些輸出文件是經(jīng)過(guò)處理的，我們只有找到我們的源文件代碼，然后進(jìn)行相應(yīng)的修改才能解決問(wèn)題。
于是這里我們需要用到source-map。
很簡(jiǎn)單，在webpack.config.js中加入如下配置即可：

devtool:?'source-map',

就這么簡(jiǎn)單，還不需要安裝什么插件。
但是這只對(duì)js有效，如果我們的css出現(xiàn)錯(cuò)誤了呢，答案就是如下配置：

18.分離生產(chǎn)環(huán)境和開發(fā)環(huán)境的配置文件

之前我們通過(guò)在命令中設(shè)置環(huán)境變量，并且通過(guò)環(huán)境變量來(lái)判斷環(huán)境來(lái)進(jìn)行不同的配置。
現(xiàn)在我們用官方推薦的方法來(lái)分離生產(chǎn)環(huán)境和開發(fā)環(huán)境的配置文件。
我們將webpack.config.js分為三個(gè)文件

• webpack.common.js

• webpack.dev.js

• webpack.prod.js

其中webpack.common.config.js為生產(chǎn)環(huán)境和開發(fā)環(huán)境共有的配置，dev為開發(fā)環(huán)境獨(dú)有的配置，prod為生成環(huán)境獨(dú)有的配置。
而想要合成真正的配置文件，還需要一個(gè)工具：webpack-merge。

??npm?install?--save-dev?webpack-merge

以下是我們之前的webpack.config.js代碼：

var?ExtractTextPlugin?=?require('extract-text-webpack-plugin')
var?HtmlWebpackPlugin?=?require('html-webpack-plugin')
var?CleanWebpackPlugin?=?require('clean-webpack-plugin')
var?path?=?require('path')
var?webpack?=?require('webpack')
var?pathsToClean?=?[
????'build',
]
var?isProduction?=?process.env.NODE_ENV?===?'production'
var?config?=?{
????entry:?['babel-polyfill',?'./src/app.js'],
????output:?{
????????path:?path.resolve(dirname,?'build'),
????????filename:?'[name].[hash].js'
????},
????devtool:?'source-map',
????devServer:?{
????????port:?8787,
????????open:?true,
????????compress:?true,
????????index:?'demo.html'
????},
????plugins:?[
????????new?HtmlWebpackPlugin({
????????????template:?'./template/index.html',
????????????filename:?'demo.html',
????????????minify:?{
????????????????collapseWhitespace:?true,
????????????},
????????????hash:?true
????????}),
????????new?ExtractTextPlugin({?filename:?'style.css',?allChunks:?false?}),
????????new?CleanWebpackPlugin(pathsToClean)
????],
????module:?{
????????rules:?[{
????????????????test:?/\.css$/,
????????????????use:?ExtractTextPlugin.extract({
????????????????????fallback:?'style-loader',
????????????????????use:?['css-loader?sourceMap']
????????????????})
????????????},
????????????{
????????????????test:?/\.less$/,
????????????????use:?ExtractTextPlugin.extract({
????????????????????fallback:?'style-loader',
????????????????????use:?['css-loader?sourceMap',?'less-loader?sourceMap']
????????????????})
????????????},
????????????{
????????????????test:?/\.jsx?$/,
????????????????exclude:?/(node_modules)/,
????????????????use:?{
????????????????????loader:?'babel-loader',
????????????????????options:?{
????????????????????????presets:?['env',?'react']
????????????????????}
????????????????}
????????????},
????????????{
????????????????test:?/\.(gif|png|jpe?g|svg)$/i,
????????????????use:?[{
????????????????????????loader:?'file-loader',
????????????????????????options:?{
????????????????????????????name:?'[name].[ext]',
????????????????????????????outputPath:?'images/'
????????????????????????}
????????????????????},
????????????????????{
????????????????????????loader:?'image-webpack-loader',
????????????????????????options:?{
????????????????????????????bypassOnDebug:?true,
????????????????????????}
????????????????????}
????????????????]
????????????},
????????????{
????????????????test:?/\.html$/,
????????????????use:?[{
????????????????????loader:?'html-loader',
????????????????????options:?{
????????????????????????minimize:?true
????????????????????}
????????????????}],
????????????}
????????]
????}
};
if?(isProduction)?{
????config.output.filename?=?'[name].[chunkhash].js'
}?else?{
????config.plugins.push(new?webpack.NamedModulesPlugin())
????config.plugins.push(new?webpack.HotModuleReplacementPlugin())
}
module.exports?=?config

接下來(lái)分為三個(gè)文件，webpack.common.js:
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var CleanWebpackPlugin = require('clean-webpack-plugin')
var path = require('path')
var webpack = require('webpack')

var?pathsToClean?=?[
????'build',
]
var?isProduction?=?process.env.NODE_ENV?===?'production'
module.exports?=?{
????entry:?['babel-polyfill',?'./src/app.js'],
????output:?{
????????path:?path.resolve(dirname,?'build'),
????????filename:?'[name].[chunkhash].js'
????},
????plugins:?[
????????new?HtmlWebpackPlugin({
????????????template:?'./template/index.html',
????????????filename:?'demo.html',
????????????minify:?{
????????????????collapseWhitespace:?true,
????????????},
????????????hash:?isProduction
????????}),
????????new?ExtractTextPlugin({?filename:?'[name].[contenthash].css',?allChunks:?false?}),
????????new?CleanWebpackPlugin(pathsToClean)
????],
????module:?{
????????rules:?[{
????????????????test:?/\.jsx?$/,
????????????????exclude:?/(node_modules)/,
????????????????use:?{
????????????????????loader:?'babel-loader',
????????????????????options:?{
????????????????????????presets:?['env',?'react']
????????????????????}
????????????????}
????????????},
????????????{
????????????????test:?/\.(gif|png|jpe?g|svg)$/i,
????????????????use:?[{
????????????????????????loader:?'file-loader',
????????????????????????options:?{
????????????????????????????name:?'[name].[ext]',
????????????????????????????outputPath:?'images/'
????????????????????????}
????????????????????},
????????????????????{
????????????????????????loader:?'image-webpack-loader',
????????????????????????options:?{
????????????????????????????bypassOnDebug:?true,
????????????????????????}
????????????????????}
????????????????]
????????????},
????????????{
????????????????test:?/\.html$/,
????????????????use:?[{
????????????????????loader:?'html-loader',
????????????????????options:?{
????????????????????????minimize:?true
????????????????????}
????????????????}],
????????????}
????????]
????}
};

然后是webpack.dev.js：

const?merge?=?require('webpack-merge');
const?common?=?require('./webpack.common.js');
const?webpack?=?require('webpack');
const?ExtractTextPlugin?=?require('extract-text-webpack-plugin')
module.exports?=?merge(common,?{
????output:?{
????????filename:?'[name].[hash].js'
????},
????devtool:?'source-map',
????devServer:?{
????????port:?8787,
????????open:?true,
????????compress:?true,
????????index:?'demo.html'
????},
????plugins:?[
????????new?webpack.NamedModulesPlugin(),
????????new?webpack.HotModuleReplacementPlugin()
????],
????module:?{
????????rules:?[{
????????????????test:?/\.css$/,
????????????????use:?ExtractTextPlugin.extract({
????????????????????fallback:?'style-loader',
????????????????????use:?['css-loader?sourceMap']
????????????????})
????????????},
????????????{
????????????????test:?/\.less$/,
????????????????use:?ExtractTextPlugin.extract({
????????????????????fallback:?'style-loader',
????????????????????use:?['css-loader?sourceMap',?'less-loader?sourceMap']
????????????????})
????????????}
????????]
????}
});

最后是webpack.prod.js:

const?merge?=?require('webpack-merge');
const?common?=?require('./webpack.common.js');
const?ExtractTextPlugin?=?require('extract-text-webpack-plugin')
module.exports?=?merge(common,?{
????module:?{
????????rules:?[{
????????????????test:?/\.css$/,
????????????????use:?ExtractTextPlugin.extract({
????????????????????fallback:?'style-loader',
????????????????????use:?['css-loader']
????????????????})
????????????},
????????????{
????????????????test:?/\.less$/,
????????????????use:?ExtractTextPlugin.extract({
????????????????????fallback:?'style-loader',
????????????????????use:?['css-loader',?'less-loader']
????????????????})
????????????}
????????]
????}
});

然后修改一下package.json中的腳本即可

??"scripts":?{
????"dev":?"webpack-dev-server?--config?webpack.dev.js",
????"prod":?"cross-env?NODE_ENV=production?webpack?-p?--config?webpack.prod.js"
},

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

React中有哪些類定義組件

正則表達(dá)式怎么在字符串中提取數(shù)字

The above is the detailed content of Detailed explanation of webpack plug-ins. For more information, please follow other related articles on the PHP Chinese website!