前言:
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$