這次帶給大家webpack的插件詳解，使用webpack插件的注意事項有哪些，以下就是實戰案例，一起來看一下。
1.自動建立HTML，可壓縮空格，可為引用的js加版本號或隨機數：html-webpack-plugin
2.處理CSS：css-loader與style-loader
3.處理LESS：less-loade與less
4.提取css程式碼到css檔案：extract-text-webpack-plugin
5.開發環境下的伺服器建立：webpack-dev-server
6.解析ES6程式碼：babel-core babel-preset-env babel-loader
7.解析ES6新增的物件函數：babel-polyfill
8.解析react的jsx語法：babel-preset-react
9.轉換相對路徑到絕度路徑：nodejs的path模組
10.給檔案加上hash值：[chunkhash],[hash]
11.清空輸出資料夾之前的輸出檔案： clean-webpack-plugin
12.模組熱替換：NamedModulesPlugin和HotModuleReplacementPlugin
13.環境變數
14.跨平台使用環境變數: cross-env
15.處理圖片路徑: file-loader和html-loader
16.圖片壓縮：image-webpack-loader
17.定位原始檔碼：source-map
18.分離生產環境和開發環境的設定檔
#1.自動建立HTML，可壓縮空格，可給引用的js加版本號或隨機數：html-webpack-plugin
解決方案：使用外掛 html-webpack-plugin
webpack.config.js如下：
module.exports = {
entry: './src/app.js',
output: {
path: dirname + '/dist',
filename: 'app.bundle.js'
},
plugins: [new HtmlWebpackPlugin({
template: './src/模板文件.html',
filename: '构建的.html',
minify: {
collapseWhitespace: true,
},
hash: true,
})]
};
注意要有path，因為這個輸出的html需要知道輸出目錄
2.處理CSS：css-loader與style-loader
loader用於對模組的原始碼進行預處理轉換。
解決方案：使用css-loader，style-loader
看一下專案結構：
此時執行webpack指令會拋出錯誤： 
接下來安裝css-loader 和style-loader
npm install --save-dev css-loader style-loader
再修改webpack.config.js為：
test代表符合需轉換檔案的
正規表示式
，而圖中表示符合所有以css結尾的檔案。
此時再執行webpack，打包後的檔案bundle.js就包含了css程式碼。 
其中css-loader負責載入css，打包css到js中。
import styles from './app.less';
console.info('我是一个js文件123')###為了解決這個情況，首先要安裝less-loader ，而less-loader是基於less的，所以也要安裝less。 ###npm i --save-dev less less-loader###修改webpack.config.js為：###
module: {
rules: [
{
test: /\.less$/,
use: [ 'style-loader', 'css-loader', 'less-loader' ]
}
]
}###4.提取css程式碼到css檔案：extract-text-webpack-plugin######很多時候我們想要的效果不是想要把幾個LESS或CSS處理好後，打包到一個js中，而是想要把它打包到一個css檔案中。 ###此時就有了插件 extract-text-webpack-plugin。 ###先安裝###npm i --save-dev extract-text-webpack-plugin###然後修改webpack.config.js為：#########
与原配置对比可以发现，比html-webpack-plugin这个插件多做了一步，就是在匹配和转换规则里面的use中使用了ExtractTextPlugin.extract。
注意这里的fallback表示，在提取文件失败后，将继续使用style-loader去打包到js中。
此时运行webpack
可以发现输出目录build下生成了一个style.css文件，也就是我们在webpack.config.js中期望生成的文件，并且在生成的demo.html中被引用了。
5.开发环境下的服务器搭建：webpack-dev-server
webpack-dev-server可以在本地搭建一个简单的开发环境用的服务器，自动打开浏览器，而且还可以达到webpack -watch的效果。
首先安装一下：
npm i -g webpack-dev-server npm i --save-dev webpack-dev-server
这里不需要改动webpack.config.js，直接运行命令
webpack-dev-server
查看webpack的插件詳解：
显示项目运行在http://localhost:8080/
webpack的输出目录的路径在/下面
并且这个服务器会自动识别输出目录下名为index的HTML文件，而我们之前输出的文件名为demo.html。
所以还需要将之前html-webpack-plugin中配置的filename改为index.html，或者直接用http://localhost:8080/demo.html也行。
当我们修改了源代码后，打开的网页还会自动更新。
为了更灵活的应用开发环境的服务器，也可以在webpack.config.js中加入如下代码：
| devServer配置 | 功能 |
|---|---|
| port | 修改端口为8787，而不是默认的8080。 |
| open | 为true表示会自动打开浏览器，而不是需要我们再手动打开浏览器并在里面输入http://localhost:8080。 |
| compress | 对本地server返回的文件提供gzip压缩 |
| index | 指定网站首页映射的文件，默认为index.html |
6.解析ES6代码：babel-core babel-preset-env babel-loader
这里说是ES6，实际上可以认为是ECMAScript的高版本代码，只是代指而已。
babel的作用是将浏览器还未支持的这些高版本js代码转换成可以被指定浏览器支持的js代码。
这里列出可以转换的大致语法：
那么首先就需要安装babel
npm install babel-core babel-preset-env --save-dev
然后，为了和webpack结合起来，要用到babel-loader
npm install babel-loader --save-dev
然后在webpack.config.js的rules数组中增加以下代码：
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
这行代码的意思是用babel-loader解析除了node_modules文件下的所有js文件。
而babel-loader就是用babel去解析js代码。
options的内容类似于.babelrc文件的配置，有了这个就不需要.babelrc文件了。
presets表示预处理器，现在的babel不像以前需要很多预处理器了，只需要env这一个就够了。
修改之前的app.js中的代码为：
console.info('我是一个js文件123')
const doSomething=() => {
console.info('do do do')
}
使用webpack命令后，可以看到我们最后的打包js文件中代码变成了这样：
7.解析ES6新增的对象函数：babel-polyfill
以下为这些新增函数：
安装：
npm install --save-dev babel-polyfill
为了确保babel-polyfill被最先加载和解析，所以一般都是讲babel-polyfill在最开始的脚本中引入。
而在webpack中，就是在放到entry中，所以需要修改webpack.config.js中的配置为：
8.解析react的jsx语法：babel-preset-react
安装
npm install --save-dev babel-preset-react
配置：
这里是匹配所有以js或者jsx结尾的文件，并用 babel-preset-env和babel-preset-react进行解析
9.转换相对路径到绝度路径：nodejs的path模块
这里首先介绍一下nodejs的path模块的一个功能：resolve。
将相对路径转换为绝对路径。
在最开始引用path模块
var path = require('path')；
然后可以在输出设置那里修改代码为：
output: {
path: path.resolve(dirname, 'build'),
filename: 'bundle.js'
},
和我们原来的代码没有任何区别。
10.给文件加上hash值：[chunkhash],[hash]
hash和chunkhash有区别，hash的话输出的文件用的都是同一个hash值，而chunkhash的话是根据模块来计算的，每个输出文件的hash值都不一样。
直接将输出文件改为
output: {
path: path.resolve(dirname, 'build'),
filename: 'bundle.[chunkhash].js'
},
[chunkhash]就代表一串随机的hash值
11.清空输出文件夹之前的输出文件：clean-webpack-plugin
当我们像上面一样不断改变输出文件时，之前的输出文件并没有去掉。
为了解决这个问题就需要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提供了监听功能，只要代码改变，浏览器就会刷新。
但是模块热替换是不会刷新浏览器，只刷新修改到的那部分模块。
模块热替换无需安装。
首先需要引入模块
var webpack = require('webpack')
其实插件中加入：
new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin()
此时运行webpack可能会报错，我们需要把之前在输出环境中写的[chunkhash]改为[hash]
13.环境变量
可以在脚本中这么写：
"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())
}
这样就可以根据环境的不同来运行不同的配置
14.跨平台使用环境变量: cross-env
上述设置环境变量的脚本中只有在window下才有效，在linux和mac上需要使用
"prod": "NODE_ENV=production webpack -p"
为了解决这个问题，使得不同平台的人能公用一套代码，我们可以使用cross-env。
首先进行安装：
npm i --save-dev cross-env
然后命令直接使用类似于mac上的用法即可
"prod": "cross-env NODE_ENV=production webpack -p"
15.处理图片路径: file-loader和html-loader
file-loader可以用来处理图片和字体文件在css文件中的路径问题，输出的css文件中会引用输出的文件地址。
html-loader可以用来处理html中，比如img元素的图片路径问题。
首先安装
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中也可以具体配置各个图片类型的压缩质量
17.定位源文件代码：source-map
如果我们用web-dev-server运行我们的输出文件，发现其中有些BUG，然后打开开发者工具取定位文件的时候，只会定位到我们的输出文件。
而这些输出文件是经过处理的，我们只有找到我们的源文件代码，然后进行相应的修改才能解决问题。
于是这里我们需要用到source-map。
很简单，在webpack.config.js中加入如下配置即可：
devtool: 'source-map',
就这么简单，还不需要安装什么插件。
但是这只对js有效，如果我们的css出现错误了呢，答案就是如下配置：
18.分离生产环境和开发环境的配置文件
之前我们通过在命令中设置环境变量，并且通过环境变量来判断环境来进行不同的配置。
现在我们用官方推荐的方法来分离生产环境和开发环境的配置文件。
我们将webpack.config.js分为三个文件
webpack.common.js
webpack.dev.js
webpack.prod.js
其中webpack.common.config.js为生产环境和开发环境共有的配置，dev为开发环境独有的配置，prod为生成环境独有的配置。
而想要合成真正的配置文件，还需要一个工具：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
接下来分为三个文件，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"
},
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是webpack的插件詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr
node.js流帶打字稿Apr 30, 2025 am 08:22 AMNode.js擅長於高效I/O，這在很大程度上要歸功於流。 流媒體匯總處理數據，避免內存過載 - 大型文件，網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE
Python vs. JavaScript：性能和效率注意事項Apr 30, 2025 am 12:08 AMPython和JavaScript在性能和效率方面的差異主要體現在：1)Python作為解釋型語言，運行速度較慢，但開發效率高，適合快速原型開發；2)JavaScript在瀏覽器中受限於單線程，但在Node.js中可利用多線程和異步I/O提升性能，兩者在實際項目中各有優勢。
JavaScript的起源：探索其實施語言Apr 29, 2025 am 12:51 AMJavaScript起源於1995年，由布蘭登·艾克創造，實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。
幕後：什麼語言能力JavaScript？Apr 28, 2025 am 12:01 AMJavaScript在瀏覽器和Node.js環境中運行，依賴JavaScript引擎解析和執行代碼。 1）解析階段生成抽象語法樹（AST）；2）編譯階段將AST轉換為字節碼或機器碼；3）執行階段執行編譯後的代碼。
Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AMPython和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。
Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AMPython和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。
JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
SublimeText3 Linux新版
SublimeText3 Linux最新版
WebStorm Mac版
好用的JavaScript開發工具
Dreamweaver Mac版
視覺化網頁開發工具
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
禪工作室 13.0.1
強大的PHP整合開發環境
