简介：webpack是一个给js准备的打包工具，官方的定义也就是一个打包器。它可以把很多的模块打包成很少的静态文件。webpack有一个自己的特性，就是代码分割；代码分割使得项目在加载时只加载当时需要的一些文件；
webpack安装和命令行：
在命令行中cd到需要安装webpack的目录下，初始化npm：
npm init
初始化完成之后可以安装webpack；现在安装的webpack都是4.X的，安装了4.x的都要安装webpack-cli才能打包成功
npm install webpack --save-dev
npm install webpack-cli --save-dev
下面就来写一些代码来使用webpack进行打包：
1.新建一个hello.js
function hello(str){
alert(str);
}
hello("hello world!");
- 打包命令
webpack hello.js -o hello.bundle.js
image.png
- 引入新文件(world.js)，进行打包
require('./world.js')
function hello(str){
alert(str);
}
hello("hello world!");
image.png
- 在js中引入css文件，并且进行打包
引入打包css需要依赖一些loader，分别是css-loader和style-loader
npm install css-loader style-loader --save-dev
并且在导入时也要注意，需要添加loader
require('css-loader!style-loader!./style.css')
image.png
也可以不在引入的时候指定loader，在命令行中指定
require('./style.css')
使用命令：
webpack hello.js -o hello.bundle.js --module-bind 'css=style-loader!css-loader'
image.png
5.打包的一些参数
--watch 更新自动打包
--progress 显示打包进度
--display-reasons 显示打包的原因
建立项目的webpack的配置文件
首先需要了解webpack配置文件的4个概念：入口，输出，loader，插件
入口：webpack 应该使用哪个模块作为打包的开始
输出：就是打包完成之后生成的文件应该存在在哪里
loader：就是一些非js文件需要依赖的loader
插件：可以require一些插件，然后添加到plugins中，可以使得执行更广的业务；
写配置文件的目的就是方便打包；
配置文件默认的名字：webpack.config.js
const path = require('path')
module.exports = {
entry: './src/script/main.js',
output:{
path:path.join(__dirname,'./dist/js'),
filename:'bundle.js'
}
}
直接执行webpack：
image.png
在dist中会生成bundle.js
image.png
如果配置文件名不是webpack.config.js，改成webpack.xj.config.js
使用命令：
webpack --config webpack.xj.config.js
image.png
如果在打包时想输入一些参数，需要在package.json中配置：
image.png
执行：npm run webpack
image.png
多个入口文件的配置：
const path = require('path')
module.exports = {
entry: {
main:'./src/script/main.js',
a:'./src/script/a.js',
},
output:{
path:path.join(__dirname,'./dist/js'),
filename:'[name]-[hash].js'
}
}
将entry设置成对象形式，就可以配置多个入口文件；拥有多个入口文件就要有多个输出；
[name] -- 指代entry中的对象key
[hash] -- 指代打包时生成的hash值
image.png
image.png
html-webpack-plugin插件：
npm install html-webpack-plugin --save-dev
在配置文件中将插件引入：
image.png
重新打包完成之后会生成两个打包后的js+1个html，在html中会将生成的两个js引入
image.png
image.png
但是打包生成的index.html和我们自己创建的index.html没有任何关系，我们需要将他们建立关系，方法很简单：设置好模版即可
image.png
插件其他参数的使用：
filename:：命名生成的html的文件名
inject：指定生成的脚本放在哪里，一般常用的就是"head"或者"body"
title： 设置html 的title，使用<%= %>的方式获取title值
image.png
image.png
image.png
也可以用这种方式查看是有的htmlWebpackPlugin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<% for(var key in htmlWebpackPlugin){%>
<%= key %>
<%}%>
------------------------------------------
<% for(var key in htmlWebpackPlugin.files){%>
<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key])%>
<%}%>
------------------------------------------
<% for(var key in htmlWebpackPlugin.options){%>
<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.options[key])%>
<%}%>
</body>
</html>
重新打包之后生成的html结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test config file title </title>
<script type="text/javascript" src="main-4e082b2fc9be4cc4a21f.js"></script><script type="text/javascript" src="a-4e082b2fc9be4cc4a21f.js"></script></head>
<body>
files
options
------------------------------------------
publicPath : ""
chunks : {"main":{"size":60,"entry":"main-4e082b2fc9be4cc4a21f.js","hash":"68ddd569f8e6fd8a323c","css":[]},"a":{"size":17,"entry":"a-4e082b2fc9be4cc4a21f.js","hash":"29cc8bc883ed375fa050","css":[]}}
js : ["main-4e082b2fc9be4cc4a21f.js","a-4e082b2fc9be4cc4a21f.js"]
css : []
manifest :
------------------------------------------
template : "/Users/emma/Desktop/personal/myself/study/webpack/webpack-demo/node_modules/html-webpack-plugin/lib/loader.js!/Users/emma/Desktop/personal/myself/study/webpack/webpack-demo/index.html"
templateParameters :
filename : "index-[hash].html"
hash : false
inject : "head"
compile : true
favicon : false
minify : false
cache : true
showErrors : true
chunks : "all"
excludeChunks : []
chunksSortMode : "auto"
meta : {}
title : "test config file title "
xhtml : false
</body>
</html>
其实到这一步我们就可以看出我们可以直接在script中使用<%= %>引入打包的文件，并且将配置文件中的inject改为false；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
</head>
<body>
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.a.entry %>"></script>>
</body>
</html>
打包结果：
image.png
output 中的 pulicPath:占位符，如果需要上线，对这个值进行了设置，那么在html文件中引用的js的路径就是以这个path开头的绝对路径；
minify：对生成的html进行压缩
网友评论