本文共 5631 字，大约阅读时间需要 18 分钟。

plugins(插件)

​ 官网: https://www.webpackjs.com/plugins/

​ 扩展webpack本身的一些功能, 他们会运行在各种模块解析完成以后的打包编译阶段,比如对解析后的模块文件进行压缩等.

HtmlWebpackPlugin

​ 在打包结束后, 自动生成一个html文件, 并把打包生成的js模块引入到该html中.

1. 安装

npm install --save-dev html-webpack-plugin

2. 在 webpack.config.js 中引入和配置

(创建一个public文件夹下面写空的index.html)

const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {
   	...  plugins: [      new HtmlWebpackPlugin({
             // 用来生成页面的title元素          title: "My App",          // 输出的html文件名,默认是index.html,也可以直接配置子目录          filename: "app.html",          // 模板文件路径,支持加载器(loader)          template: "./public/index.html"      })   ]};

3. 然后package.json运行脚本start

4. 在public文件夹下的index.html中,title可以通过<%=htmlWebpackPlugin.options.title%>获取配置的title值

    
       
       
           
html-webpack-plugin

clean-webpack-plugin

​ 删除(清理)构建目录

1. 安装

npm install --save-dev clean-webpack-plugin

2. 在 webpack.config.js 中引入和配置

要求是:在打包后的dist文件夹下有public文件夹和app.html,public文件夹里面又包括image文件夹,js文件夹等一系列的

const {
   CleanWebpackPlugin} = require('clean-webpack-plugin');module.exports = {
   	...,    output: {
           path: path.resolve(__dirname, "dist"),        filename: "public/js/app.js"    },    module: {
           rules:[            ...,            {
                   test: /\.(png|jpe?g|gif)$/i,                use:{
                       loader : 'url-loader',                    options: {
                           outputPath:'/public/image',                        publicPath:'./public/image',                        limit: 1000                    }                }            },         	,,,        ]    },	plugins: [        ...,        new CleanWebpackPlugin(),	]}

mini-css-extract-plugin

​ 提取css到一个单独的文件中

​ 异步加载; 无重复性编译(性能); 更容易使用; 特定于css;

1. 安装

npm install --save-dev mini-css-extract-plugin

2. 在 webpack.config.js 中引入和配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {
       ...,    module: {
           rules:[            ...,            {
                   test: /\.css$/,                // use: ['style-loader',                // {
                   //     loader:'css-loader',                //     options: {
                   //         // 启用/禁用 url() 处理                //         url: true,                //     }                // }],                use: [{
                           loader: MiniCssExtractPlugin.loader                    },                    {
                           loader:'css-loader',                        options: {
                               // 启用/禁用 url() 处理                            url: true,                        }                    }]            }        ]    },    plugins: [        ...,        new MiniCssExtractPlugin({
               // filename 确定每个输出css文件的名称.            filename: './public/css/app.css'        }),    ]}

3. cs.css中引入图片(src下的cs.css,它和data文件夹是同级目录)

body{
       background: rgb(47, 255, 203);    background: url('./data/-26953ed6fb615e2a.jpg');    color: red;}

​ 注意: 在mini-css-extract-plugin中的webpack.config.js 中配置时注意不能使用style-loader,要将她进行修改

​ ./ 是相对路径,起点是文件自身

​ / 是根路径

sourceMap

​ 一个记录了编译后代码与源代码的映射关系的文件.(解释映射: 在打包的dist文件夹下的public下的js文件夹里面有app.js和app.js.map,他俩就是映射关系,app.js.map是将app.js中的每一行每一列都遍历出来)

​ 运行在浏览器的代码是打包合并过的,不利于调试和错误定位,就是解决这个的.

​ 对浏览器报错的行数更精准

1. src文件夹下新建一个a.js

export default ()=>{
       console.log('fn');}

2. index.js中引入

import a from './a.js'document.onclick = function(){
       console.log(a);    a();}console.log('123456789')

3. 在 webpack.config.js 中配置

module.exports = {
       mode: 'production',  	devtool: 'source-map', //注意存放位置  	...}

WebpackDevServe

​ 解决每次代码都需要重新编译打包,刷新浏览器

1. 安装

npm install --save-dev webpack-dev-server

2. 在package.json 中添加 scripts

"scripts": {
       ...,    "server": "webpack serve --open"  },

3. 修改 webpack.config.js

module.exports = {
     ...,  devServer: {
           // 生成的虚拟目录路径        contentBase: "./dist",      		// 打开网站时所在的页面      	// 如果加了这个打包后直接弹出的页面就是app.html页面    	// openPage:'app.html',    	// index:'app.html',    	        // 自动开启浏览器        open: true,        // 端口        port: 8081    }}

4. 在黑窗口输入npm run server 会直接跳出来网页

   

5. 然后在http://localhost:8080后面写/app.html直接进入页面.

备注: 启动服务器后,dist里面就没有任何东西了,就直接存在了内存中(同时虚拟了一个存放目录路径),后期更新编译打包和访问速度大大提升.

​ 注意: 这样在修改index.js里面的内容时就会实现热更新,浏览器的控制台会实时更新.

​ 注意: config.js这个配置文件无论是vue还是webpack中, 修改了之后, 都需要重新启动项目才可以生效

​ 注意: 加了openPage:'app.html',和index:'app.html',都是打包后直接弹出的页面就是app.html页面,需要两个都加,如果只加一个的话可能出来就会直接下载点其他小的东西

Hot Module Replacement

​ 流程(理解下面那段话): src => live reload => server => chrome

​ 在之前当代码有变化，使用的 live reload，刷新整个页面，但只修改了很小的内容，也刷新了整个页面，无法保持页面操作状态。HMR 就出现了，它的核心的局部（模块）更新，也就是不刷新页面，只更新变化的部分

1. 修改 webpack.config.js

module.exports = {
     ...,  devServer: {
           // 生成的虚拟目录路径        contentBase: "./dist",  		// 打开网站时所在的页面      	// 如果加了这个打包后直接弹出的页面就是app.html页面    	openPage:'app.html',    	index:'app.html',        // 自动开启浏览器        open: true,    	// 开启热更新        hot:true,        // 即使 HMR 不生效，也不去刷新整个页面(选择开启)        hotOnly:true,        // 端口        port: 8081,    	    }}

2. index.js里面修改内容的时候 页面只是局部加载,不会整个更新

注意:

1. mini-css-extract-plugin 是异步加载,无重复性编译(性能);特定于css

2. 在mini-css-extract-plugin 中的webpack.config.js中配置时注意不能使用style-loader,要将它进行修改

3. ./ 是相对路径,起点是文件自身;

   / 是根路径

4. WebpackDevServe 这样在修改index.js里面的内容时就会实现热更新,浏览器的控制台会实时更新.

5. config.js这个配置文件无论是vue还是webpack中, 修改了之后, 都需要重新启动项目才可以生效

6. 加了openPage:'app.html',和index:'app.html',都是打包后直接弹出的页面就是app.html页面,需要两个都加,如果只加一个的话可能出来就会直接下载点其他小的东西

总结:

plugins(插件)

• HtmlWebpackPlugin 在打包后自动生成一个html文件,并把打包生成的js模块引入到该html中.
• clean-webpack-plugin 删除(清理)构建目录
• mini-css-extract-plugin 提取到一个单独的文件中
• sourceMap 对浏览器报错的行数更精准.
• WebpackDevServe 解决每次代码都需要重新编译打包,刷新浏览器
• Hot Module Replacement 流程 就是src => live reload => server => chrome

转载地址：https://blog.csdn.net/ZZZ___jh/article/details/117741956 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！