webpack4出了以后，一些插件变化很大，和之前的版本使用方式不一样，新手入坑，本篇将介绍如何从一开始配置webpack4的开发版本，对css，js进行编译打包合并生成md5，CSS中的图片处理，js自动注入html页，删除指定文件，提取公共文件，热更新等等。
安装
//全局安装 npm install -g webpack webpack-cli
创建文件夹初始化
//创建文件夹 mkdir webpack4demo //进入 cd webpack4demo //初始化 npm init -y
创建文件夹scripts 里面创建index.js文件
index.js
const s=()=>{ console.log('s init') } s()
创建webpack.config.js文件
webpack.config.js
const path = require("path"); module.exports = { entry: { index: "./scripts/index.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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$Title$</title> </head> <body> $END$ </body> <script src="https://www.jb51.net/article/dist/index.bundle.js"></script> </html>
打开浏览器将会看到之前设置的js文件生效
对css，js进行编译打包合并生成md5
创建a.js，c.js，a.css，更改index.js
a.js
import acss from './a.css' import c from './c.js' const a={ init(){ console.log("a init bbbaaa") }, cinit(){ c.init() } } export default a;
c.js
const c={ init(){ console.log("ccccc") } } export default c;
a.css
body{ background-color: #6b0392; }
index.js
import a from './a.js' import c from './c.js' const s=()=>{ a.init() a.cinit() c.init() console.log('s init') } s()
配置webpack.config.js文件
const path = require("path"); module.exports = { entry: { index: "./scripts/index.js" }, output: { filename: "[name].bundle.[hash].js",//[hash]会在后面生成随机hash值 path: path.join(__dirname, "dist") }, module: { // 处理对应模块 rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]//处理css } ] }, }
安装style-loader， css-loader
npm install style-loader css-loader --save-dev
执行webpack --mode development将会看到一个带md5值得js文件，将他引入html中
CSS中的图片处理
安装url-loader, file-loader
npm install url-loader file-loader --save-dev
修改a.css 将一张图片放到scripts目录
body{ background-image: url("./timg.jpg"); background-color: #a748ca; }
配置webpack.config.js文件
module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test:/\.(png|jpg|gif)$/, use:[{ loader:'url-loader', options:{ outputPath:'images/',//输出到images文件夹 limit:500 //是把小于500B的文件打成Base64的格式，写入JS } }] } ] },
执行webpack --mode development将会看到dist中有一个images文件夹中有一张图片，打开index.html
js自动注入html文件
使用插件html-webpack-plugin，可以将生成的js自动引入html页面，不用手动添加
//安装html-webpack-plugin npm install html-webpack-plugin --save-dev //安装webpack webpack-cli npm install webpack webpack-cli --save-dev
配置webpack.config.js文件
const path = require("path"); const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin module.exports = { entry: { index: "./scripts/index.js" }, output: { filename: "[name].bundle.[hash].js", path: path.join(__dirname, "dist") }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, plugins: [// 对应的插件 new HtmlWebpackPlugin({ //配置 filename: 'index.html',//输出文件名 template: './index.html',//以当前目录下的index.html文件为模板生成dist/index.html文件 }), ] }
执行webpack --mode development 记得要讲之前手动引入的script删除，便可以看到dist那里自动生成一个index.html，打开便可以看到。
删除指定文件
使用插件clean-webpack-plugin，删除指定文件，更多配置，查看clean-webpack-plugin
npm install clean-webpack-plugin --save-dev
配置webpack.config.js文件