一、使用WebStorm创建一个简单项目。
在项目中建立如下文件夹:src、dist,在src中分别建立js、css、html、img文件夹、webpack.config,js,并在相应目录下建立createElem.js、index.js、index.html,index.css,项目结构如下(此时没有node_moudles、package.json、package-lock.json):
相应文件内容如下:
①createElem.js
module.exports = function(){
let p = document.createElement("p");
p.innerHTML = "我是动态添加的";
return p;
}
②index,js
const createElem = require("./createElem.js");
document.getElementById("append").onclick = function(){
let p = createElem();
document.getElementById("app").appendChild(p);
}
③index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<body>
<button id="append">添加DOM</button>
<div id="app"></div>
</body>
</html>
④index.css
p{
border:1px solid #221133;
}
二、命令操作
1.生成package.json(定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据))
使用如下命令:
npm init -y // 生成package.json -y默认设置
package.json内容
{
"name": "msunui",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" // 这里build相当于代替webpack指令,使用npm run build(这是JSON文件,注释应删除)
},
"keywords": [],
"author": "",
"license": "ISC"
}
2.安装相关依赖
npm install webpack webpack-cli -D // 这里我没有使用全局安装 -D生产环境使用,依赖添加到devDependencies节点下; -s一般上线使用:依赖会添加到dependencies节点下
安装依赖后的package.json文件内容:
{
"name": "msunui",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2"
}
}
3.编写webpack.config.js。
module.exports = {
entry:"./src/js/index.js", // 入口文件
output:{
path: __dirname+"/dist/html", //输出文件路径必须是个绝对路径
filename: "bundle.[hash].js" // 输出文件名,hash是个哈希,解决浏览器缓存问题
},
module: {
}, // 模块,此处可添加一些loader
mode:"development", // 设置打包模式,development:开发模式,代码不压缩;production:生产模式,代码会进行压缩。不设置该值打包时,会警告
plugins: [] // 插件集
}
三、打包
打包命令:
webpack
npm run build // 因为在package.json中的scripts节点下添加了"build": "webpack"
打包后会在dist目录下生成 html/bundle.c36572422ef40197220a.js的js文件。
四、使用插件
经过上面三个步骤之后我们得到了一个打包好的js文件,现在我们试着用一下这个文件。在dist/html里新建一个index.html,内容和src/html/index.html一样,引入我们刚刚生成的js文件,在浏览器中打开index.html:
运行成功。
因为我们每次打包的js都会带有一个哈希值,这个值每次打包都是不一样的,那么每次都要重新引入js;而且index.html在src/html下就有,再复制一遍似乎有点麻烦。下面我们使用webpack的插件来解决这个问题:
1.html-webpack-plugin插件
npm install html-webpack-plugin -D // 引入插件
引入插件后,在webpack.config.js中配置我们的插件信息:
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry:"./src/js/index.js",
output:{
path: __dirname+"/dist/html",
filename: "bundle.[hash].js"
},
module: {
},
mode:"production",
plugins: [
new HtmlWebpackPlugin({
filename:"index.html", // 新文件名字
template:"./src/html/index.html", // 文件模板
title:"Webpack Test" // 文件的title
})
]
}
修改src/html/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 获取设置的文件title -->
<title><%= htmlWebpackPlugin.options.title %></title>
<body>
<button id="append">添加DOM</button>
<div id="app"></div>
</body>
</html>
重新npm run build,打包后,你会发现dist/html中有两个js,每次打包都会生成一个js,而之前的js也会存在,为了解决这个问题我们再使用clean-webpack-plugin插件。
2.clean-webpack-plugin
安装及使用方法同上。
webpack.config.js如下:
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
let pathToClean = ["./dist/html"];
module.exports = {
entry:"./src/js/index.js",
output:{
path: __dirname+"/dist/html",
filename: "bundle.[hash].js"
},
module: {
},
mode:"production",
plugins: [
new HtmlWebpackPlugin({
filename:"index.html",
template:"./src/html/index.html",
title:"Webpack Test"
}),
new CleanWebpackPlugin(pathToClean)
]
}
相关插件的使用方法可在这里查看:npm网站