浅谈webpack4.x 入门(一篇足矣)

前端之家收集整理的这篇文章主要介绍了浅谈webpack4.x 入门(一篇足矣)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言:

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

安装

创建文件夹初始化

文件夹 mkdir webpack4demo //进入 cd webpack4demo //初始化 npm init -y

创建文件夹scripts 里面创建index.js文件

index.js

{ console.log('s init') } s()

创建webpack.config.js文件

webpack.config.js

文件,若不配置webpack4将自动查找src目录下的index.js文件 },output: { filename: "[name].bundle.js",//输出文件名,[name]表示入口文件js名 path: path.join(__dirname,"dist")//输出文件路径 } }

执行webpack --mode development将会生成dist/index.bundle.js

创建index.html,并引入js

<Meta charset="UTF-8"> $Title$ $END$

猜你在找的JavaScript相关文章