前言：

webpack4出了以后，一些插件变化很大，和之前的版本使用方式不一样，新手入坑，本篇将介绍如何从一开始配置webpack4的开发版本，对css，js进行编译打包合并生成md5，CSS中的图片处理，js自动注入超文本标记语言页，删除指定文件，提取公共文件，热更新等等。

安装

//全局安装npm install -g webpack webpack-cli创建文件夹初始化

//创建文件夹mkdir webpack k4演示//进入CD webpack k4演示//初始化新公共管理初始化表示“有…的”创建文件夹剧本里面创建index.js文件

index.js

const s=()={ console。日志(' s init ')} s()创建webpack.config.js文件

webpack.config.js

const path=require(' path ')；模块。导出={条目： {索引： } ./scripts/index.js' //入口文件，若不配置webpack4将自动查找科学研究委员会目录下的index.js文件}，输出： { filename : '[name]。捆绑。js '，//输出文件名，[姓名]表示入口文件射流研究…名路径：路径。联接(_ dirname，' dist')//输出文件路径}}执行网络包模式开发将会生成dist/index.bundle.js

创建index.html，并引入射流研究…

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' Title $ Title $/Title/head body $ END $/body script src=' http 3360 ./dist/index捆绑。js '/脚本/html打开浏览器将会看到之前设置的射流研究…文件生效

对css，js进行编译打包合并生成讯息摘要5

创建a.js，c.js，a.css，更改index.js

a.js

从""导入ACS ./a.css "从导入" c ./c . js ' const a={ init(){ console。log(' a init bbbaa ')}，cinit(){ c . init()} }导出默认值a；c.js

const c={ init(){ console。日志(' cccccc ')} }导出默认c .a.css

正文{背景色： # 6b 0392}index.js

从导入/a.js "从导入" c ./c . js ' const s=()={ a . init(). a . cinit(). c . init()控制台。日志(' s init ')} s()配置webpack.config.js文件

const path=require(' path ')；模块。导出={条目： {索引： } ./scripts/index.js' }，输出： { filename : '[name]。捆绑[散列].js '，//[hash]会在后面生成随机混杂值路径：路径。join(_ dirname，' dist') }，module: { //处理对应模块规则： [ { test: / .css$/，use: [ 'style-loader '，' css-loader' ]//处理css } ] }，}安装样式加载器

新公共管理安装样式-加载器CSS-加载器-保存-开发执行网络包模式开发将会看到一个带讯息摘要5值得射流研究…文件，将他引入超文本标记语言中

半铸钢钢性铸铁(铸造半钢)中的图片处理

安装全球资源定位器(Uniform Resource Locator)加载程序、文件加载程序

新公共管理安装网址-加载程序文件-加载程序-保存-开发修改a.css将一张图片放到剧本目录

正文{背景-图像： url(' ./timg。jpg’)；背景-颜色： # a 748 ca}配置webpack.config.js文件

模块： {规则3360 [{测试：/ .css$/，use: [ 'style-loader '，' css-loader' ] }，{ test:/ .(png|jpg|gif)$/，使用：[{ loader:'url-loader '，选项：{ outputPath:'images/'，//输出到形象文件夹limit:500 /是把小于500B的文件打成Base64的格式，写入JS } }] } ]}，执行网络包模式开发将会看到距离中有一个形象文件夹中有一张图片，打开index.html

射流研究…自动注入超文本标记语言文件

使用插件html-webpack-plugin，可以将生成的射流研究…自动引入超文本标记语言页面，不用手动添加

//安装html-webpack-pluginnpm安装html-webpack-plugin - save-dev//安装webpack webpack-clinpm安装webpack webpack-cli -保存-戴夫配置webpack.config.js文件

const path=require(' path ')；const HTMlWebPackLugin=require(' HTMl-web pack-plugin ')；//引入html-web pack-plugin module . exports={ entry : { index 3360 }。/scripts/index.js'}，output : { filename 3360 '[name]。捆绑。[哈希]。js '，path : path . join(_ dirname，' dist') }，module : { rule s 3360[{ test :/。css$/，use: [ 'style-loader '，' css-loader' ] } ] }，Plugins: [//相应的插件new HtmlWebpackPlugin({ //配置文件名： 'index.html '，//输出文件名template: '。/index.html '，//用当前目录中的index.html文件作为模板生成dist/index.html文件})，]}执行webpack模式开发。记得删除之前手动引入的脚本，可以看到dist中会自动生成一个index.html，打开后就可以看到了。

删除指定的文件

使用插件clean-webpack-plugin，删除指定的文件，配置更多，并查看clean-webpack-plugin

NPM安装清理-网络包-插件-保存-开发配置网络包.配置. js文件

const cleanwebpackkplugin=require(' clean-web pack-plugin ')；//引入plugins: [//对应的插件新的HtmlWebpackPlugin({ //配置filename3360' index.html '，//输出文件名template: '。/index.html '，//用当前目录中的index.html文件作为模板生成dist/index.html文件})，新建cleanwebpackkplugin([' dist '])，//传入数组，指定要删除的目录]并执行webpack模式开发。可以看到dist目录已经被删除，新的dist已经生成，并且之前的js文件已经被删除。

提取公共文件

我们可以看到a.js和index.js都引入了c.js文件。简单来说就是减少代码冗余，提高加载速度。与以前的webpack配置不同：

//配置//new webpack . optimize . splitchunkplugin({//Name : ' common '，//如果要提取公共代码，创建一个新实例//minchunks3360 2，//重复两次后提取//Chunks 3360[' index '，' a'] //指定提取范围//})，//现在配置Optimization : { Split Chunks : { Cache Groups : { Commons 3: }//拉出公共代码Chunks 3360' initial '，Name :任意命名为minchunks:2，//最小引用两次minSize: 0 //只要超过0字节就生成新包}，vendor: {//撤销第三方插件test: /node_modules//，//在node_modules下指定第三方包chunks: ' initial '和name3360' vendor '。//任意命名打包的文件名。//设置优先级，防止提取时用户自定义的公共代码被覆盖。不要打包priority: 10 }，} }}，下载jqnpm安装jquery-从a.js，index.js中的' jquery '输出$保存导入$的内容

生成3个js文件并执行网络包模式的开发

热更新，自动刷新

我们将使用webpack-dev-serve。webpack-dev-server是基于Node.js和webpack的小型服务器，具有强大的自动刷新和热替换功能。

安装网络包-开发-服务

文件NPM安装网络包-开发-服务-保存-开发配置

const web pack=require(' web pack ')；plugins :[新html webpackplugin({ filename : ' index . html '，template3360 '。/index.html '，})，新的cleanwebpackplugin (['dist'])，//在数组中传递。指定要删除的目录。//热更新，不刷新newwebpack。hotmodulepreplacementplugin()]，devserver 3360 {//配置此静态文件服务器，可用于预览内嵌的打包项目：路径。//添加websocket客户端hot:true，//打包后，//热加载contentbase : path . resolve(_ dirname，' dist ')，//服务运行时开发文件根目录host3360' localhost '，//主机地址port: 9090，//端口号compressor : true//开发服务器是否启动gzip等压缩}，配置package.json。

脚本' : { ' dev ' : ' web pack-dev-server-mode development ' }，执行npm运行dev访问http://localhost:9090/

随意修改任何文件都会自动刷新网站显示并修改相应内容。

总结：

webpack4的配置有很多，比如css拆分、少sass配置、js编译es6、多入口配置、生产环境配置、js未使用模块的自动检测和剥离等。而我们只能等下次有空的时候再总结。谢谢观看。新手入坑，欢迎指出错误。

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