一直在用webpack，上次也分享了用webpack配置es6~9的语法参考链接。但是对于一些小白童鞋，基本的配置不太了解，所以就在春节假期的时候梳理了一下webpack4的知识点。方便一些刚入行的人学习，也是对自己的总结和提高

一、几个盲点的解释

1.全局安装和本地安装

对于一般新手来说，我是全局安装还是在这个项目中安装(本地安装)是有疑问的。个人建议前端发展这么快，我们还是用本地安装比较好(用最新的技术栈)。我们知道javascript是一种弱语言，有局部变量和全局变量。事实上，全局安装和局部安装的本质有点类似于函数的全局变量和局部变量。2.安装软件包时-保存和-D之间的区别

一般来说，我们只是在开发环境所依赖的包中直接使用-D，这将向项目的package.json文件中的devDependencies添加相关的配置信息

NPM安装web包web包-CLI-d-save将被放置在package.json文件的依赖项中

记住只对开发环境需要使用的包使用-D

第二，使用webpack的所谓0配置

Webpack是基于配置的前端支架。在实际的项目开发中，您需要配置您需要的插件和加载器。

1.网络包最基本的基础是：

plugins:配置插件的module:主要配置部分加载器2和初始化项

创建文件夹网络包-演示

初始化并生成package.json文件

npminit-是3。安装webpack最基本的依赖包

Npm安装web pack web pack-CLI-D4，创建一个文件夹src并在其中创建一个index.js文件

5.在命令行上运行(首先忽略警告信息)

npx网络包

6.在生成的dist文件夹下会生成一大包main.js文件，在这个文件夹下会创建一个index.html文件来导入main.js，并检查控制台是否在浏览器中输出信息。

二、网络包的配置

1.在项目下创建一个webpack.config.js文件

2.可以配置以下内容

const path=require(' path ')；module.exports={entry: ' '，//打包文件output 3360 }的入口，//打包导出文件配置有devserver3360 {}，//开发服务器module: {}，//模块配置有插件3360 {}，//插件配置模式：' development '，/['development '，' production ']modelesolve : { }，//配置解析三、配置开发环境(打包在内存中)

1.安装包

在NPM安装网络包-开发-服务器-D2，配置入口文件和出口文件

module.exports={entry: '。/src/index.js '，//打包文件output 3360 { filename 3360 ' build . js '，//注意这个位置必须是绝对路径path 3360 path . join(_ dirname，' dist')}，

该模块. exports={ 0.devserver : { contentbase 3360 path . join(_ dirname，' dist ')，port: 8000，compresse3360 true，//自动压缩open3360 true，//自动打开浏览器}，}4。in package.json

.{'dev' :' web pack-dev-server '，}，5、调试运行命令(它会自动打开浏览器，但其中没有显示信息)

Npm运行dev6，一个使用html-webpack-plugin自动生成html页面的插件

1.安装包

NPM安装html-网络包-插件-d2。在webpack.config.js中引入

const HTMlWebPackLugin=require(' HTMl-web pack-plugin ')；3.在插件中配置

插件：[新的html webpackplugin({ template : })。/src/index.html '，title :' web pack test '，})，4。关于index.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，Initial-scale=1.0 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title %=html webpackplugin . options . title %/title/head dy/body/html 5。请检查网页插件的配置

6.运行npm运行dev直接打开浏览器，打开控制台查看打印信息

7.创建一个包命令(在package.json中添加一个命令)

脚本' : { ' dev ' : ' web pack-dev-server '，' build' :' web pack'}，8。通过哈希值创建随机生成的数字来解决缓存问题

1.为生成的js文件生成随机数

输出： { filename : }版本。[哈希]。js '，//默认情况下生成20位哈希值//filename:' build。[hash33608]。“js”可以自定义生成多少位随机数//请注意，此位置必须是绝对路径path : path . join(_ dirname，)Hash值)

插件：[新的html webpackplugin({ template : })。/src/index.html '，title :' web pack test '，hash: true，})，3。运行命令npm运行构建，查看dist文件夹中的文件是否有尾部(注意：如果您想更新文件，打包将生成新文件。

4.术后效果

脚本类型=' text/JavaScript ' src=' http : build . 1a c0ed 4b . js？1a c0ed 4 bfca 95 df 7576 e '/脚本9，关于html-webpack-plugin的其他常用配置

新建html webpackplugin({ 0.minify : { removeattributequotes 3360 true，//移除双引号collapseWhitespace: true，///将代码合并为一行}}) IV。清除以前插件的插件使用

我们会在每个包之后删除缓存文件，以确保它每次都是最新的

1.装置

使用NPM安装清理-网络包-插件-D2

const cleanwebpackkplugin=require(' clean-web pack-plugin ')；插件：[新的cleanwebpackplugin ([)。/dist'])，], 5.关于webpack条目文件的几种方法

1.单条目文件(参见上文)

2.多条目文件(可以写成数组)，它们一起打包在一个导出文件中

module . exports={ mode : ' development '，entry :[]。/src/index.js '，'。/src/a.js' ]，output : { filename : ' build。[hash:8]。js '，//注意，这个位置必须是绝对路径path:path。join (_ _ dirname，' dist')}} 3。多入口、多出口、多模板模式

1.导入文件和导出文件的配置

module . exports={ mode : ' development '，entry : { index : }。/src/index.js '，a: '。/src/a.js' }，输出： {filename :' [name]。[hash :8]。js '，路径：路径。join (_ _ dirname，' dist')}} 2。模板配置(需要指出输出文件的名称)

.plugins: [新的CleanWebpackPlugin([)。/dist'])，新的HTMlWebPackplugin({ filename : ' index . html '，//指示打包的文件名template: '。/src/index.html '，title:' web pack test 1 '，hash: true，chunk 3360[' index ']//指示选择哪个js文件})，New html webpackkplugin({ filename : ' a . html '，template : '。/src/index.html '，title :' webpack test 2 '，hash : true，chunks 3360 ['a']})]，}.不及物动词网络包热

1.按照上面的方法，我们可以实现修改js代码浏览器会刷新，但是类似于我们手动刷新(如果有状态机的数据，数据会丢失)

2.我们可以使用webpack附带的热更新插件

3.使用

1.在webpack.config.js中配置

const web pack=require(' web pack ')；插件： [newwebpack。hotmodulereplacementplugin()，].2.在主条目index.js文件中添加

if(module . hot){ module . hot . accept()；}七。配置css样式加载

默认情况下，Webpack支持js，并且必须为其他css或typescript安装加载器

1.安装包

NPM的模块配置规则安装风格-加载器CSS-加载器少-加载器少-D2

.module : { rule 3360 [{ test :/。css$/，use :[{ loader : ' style-loader ' }，{ loader: 'css-loader' } ] }，{ test: /。减$/，使用：[{ loader : ' style-loader ' }，{loader:' css-loader'}，{loader3360' less-loader'}，]}，3.在src中创建一个. css文件夹，并创建一个。

4.将样式文件引入index.js

“进口”。/CSS/a . CSS '；“进口”。/CSS/b . less '；5.启动服务并检查浏览器的元素栏

八、提取成单独的样式文件

上面的方式虽然可以加载样式文件，但是加载出来的全部的以样式类型='text/css './style的方式到页面中，增加了射流研究…文件的体积，如果项目大，可能会造成射流研究…文件过大加载慢，甚至加载不出的弊端。

1、抽取单独的钢性铸铁目前主要有2个包可以选择

使用插件[电子邮件保护]使用插件迷你CSS-提取-插件(今后取代上面那个插件的包) 2、安装包

新公共管理安装[电子邮件保护]迷你CSS-extract-plugin-D3，使用[电子邮件保护]插件的方式

1.引包

const extracewebpackkpligin=require(' extract-text-web pack-plugin ')；2.修改组件中的加载器

模块： {规则3360 [{测试：/ .css$/，使用： extractewebpackpligin。提取({使用：[{ loader : ' CSS-loader ' }]})}，{ test: / .小于$/时，使用： extractewebpackpligin。提取({使用：[{ loader : ' CSS-loader ' }，{ loader : ' less-loader ' }]})}，3.使用插件

plugins: [.新的extracewebpackpligin({ filename : ' CSS/index。CSS '，})，新的html webpackkplugin({ template : })./src/index.html '，title: 'webpack测试，hash: true，//先注释下面的代码，更好看结果//minify : {//removeattributequotes : true，//去除双引号//collapseWhitespace: true，//合并代码到一行//} })],4、在index.js中依然是导入钢性铸铁文件

"进口"。/CSS/a . CSS '；"进口"。/CSS/b . less '；4、使用迷你钢性铸铁提取插件插件方式

1.导包

const ministracplugin=require(' mini-CSS-extract-plugin ')；2.在组件中配置

模块： {规则3360 [{测试：/ .css$/，使用：[ministracplugin。加载程序，{ loader: 'css-loader' } ] }，{ test: / .减$/,使用：[ministracplugin。加载程序，{ loader: 'css-loader' }，{ loader: 'less-loader' } ] } ]}，3 .配置插件

plugins: [.新的ministracplugin({ filename : ' CSS/CSS。CSS '，})，]4 .一样的在index.js中导包

5.测试

九、抽取成多个单独的样式文件

1、导包

const extracewebpackkpligin=require(' extract-text-web pack-plugin ')；2、预先实例化两个输出文件的对象

const CSS extract=new extracewebpackpligin(' CSS/a . CSS ')；const les extract=new extractewebpackpligin(' CSS/b . CSS ')；3、在组件中预先实例化的对象

模块： {规则3360 [{测试：/ .css$/，使用： CSS解压。提取({使用：[{ loader : ' CSS-loader ' }]})}，{ test: / .少于$/的，使用： lesextract。提取({使用：[{ loader : ' CSS-loader ' }，{ loader: 'less-loader' }，]})} })})，4，配置插件

plugins: [ cssExtract，lessExtract，]5、运行命令新公共管理运行构建查看

十、关于抽取样式修改后不刷新的问题（开发的时候依然是加上风格中)

1.定义使残废

const CSS extract=new extracewebpackpligin({ filename : ' CSS/a . CSS '，})；const les extract=new extractewebpackpligin({ filename : ' CSS/b . CSS '，})；2.在模块中使用

模块： {规则3360 [{测试：/ .css$/，使用： CSS解压。提取({回退： '样式加载器'，使用：[{加载器： ' CSS-加载器' }]})}，{ test: / .少于$/的，使用： lesextract。提取({ fallback : ' style-loader '，使用：[{ loader : ' CSS-loader ' }，{ loader: 'less-loader' }，]})}，十一、关于抽取的时候不引入未使用的样式来简单打包后的体积

1、安装包

新公共管理安装purify CSS-web pack purify-CSS glob-D2,导入

const purify CSS web pack=require(' purify CSS-web pack ')；const glob=require(' glob ')；3、使用

.//注意必须要在html webpackkplugin后面使用新的purifycswebpack({ path s 3360 glob。同步(路径。解析('(src/*).html'))}).十二、给css3样式加上前缀

1、使用postcss实现该功能

2、安装包

新公共管理安装postss-loader autoprefixer-D3、配置后置装载机的加载器

.{ test :/}CSS $/，使用：cssextract。提取({fallback:' style-loader '，use 3360[{ loader : ' CSS-loader ' }，{loader:' postcss-loader'}，)。

module . exports={ plugins :[require(' autoprefixer ')]} 5。用a.css写css3的样式

正文{ background:青色；变压器：旋转(30度)；}6.执行命令npm运行构建以查看生成的文件

十三.请搜索更多插件的使用，只要你能想到。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。