1. 安装
首先安装webpack,参考https://blog.csdn.net/zl13015214442/article/details/96117592一文。
2. 配置
webpack
通过webpack.config.js
来配置,来看一下文件构造(zlpack
可以忽略):
在webpack.config.js
中基本的配置有:
// 基于node的 遵循commonJS规范
let path = require('path');
module.exports = {
entry: "./src/index.js", // 入口
output: {
filename: 'build.js',
// 这个路径必须是绝对路径,path.resolve就是根据当前的路径解析返回一个绝对路径
path: path.resolve('./build')
}, // 出口
devServer: {}, // 开发服务器
module: {}, // 模块配置
plugins: [], //插件的配置
mode: 'development', // 可以更改模式
resolve: {}, // 配置解析
}
这样配置之后,执行npx webpack
就会自动生成build/build.js
,将入口文件打包到build.js
中,而且在配置文件中设置了mode
之后,我们就不需要再执行webpack
命令的时候设置mode
了。打包后得到的build.js
也可以在浏览器中执行。
3. 配置开发服务器
现在的问题是我们每次执行打包命令都会生成一个真实的文件build.js,为了提高性能,我们应该在内存中打包,这就联系到我们在webpack
中应该如何配置开发服务器–webpack-dev-server
。
- 安装
webpack-dev-server
安装好之后,我们如果执行的话一般通过npx命令来执行,但是有些麻烦,因此我们可以在package.json
文件的scripts
中配置一些我们自定义的脚本:
那我们就可以直接执行npm run start
来运行开发服务器了。
PS:json文件中一定不能写注释!!!
执行结果:
可以看到起了一个端口号8080
,而不是真正的生成一个文件,并且提示webpack
的输出来自根目录webpack-public
下,我们打开看一下,可以看到根目录下所有的文件:
而我们真正想看的是build
下的文件,而不是所有的,所以需要在配置文件中设置直接定位到build
文件下,并且在执行执行之前先把我们目录下的build.js
文件删掉:
// 基于node的 遵循commonJS规范
let path = require('path');
module.exports = {
entry: "./src/index.js",
output: {
filename: 'build.js',
path: path.resolve('./build')
},
devServer: {
contentBase: './build'
}, // 开发服务器
module: {}, // 模块配置
plugins: [], //插件的配置
mode: 'development', // 可以更改模式
resolve: {}, // 配置解析
}
刷新页面:
这个时候再来看我们的文件目录,没有生成真正的文件build.js
,但是在浏览器中可以访问到:
另外我们可以访问在build
文件夹创建的其他文件。还可以配置端口号、压缩等其他参数:
devServer: {
contentBase: './build',
port: 3000,
compress: true, // 服务器压缩
open: true // 自动打开浏览器localhost:3000
}, // 开发服务器
而我们想要打包出一个真实的文件时,执行在scripts
中我们配置的命令npm run build就
可以了。
而我们想要在浏览器中查看效果时,不能每次都在build
文件夹下新建index.html
引入打包后的build.js
文件,理想的情况是在src
中创建一个html
文件,然后打包后的文件引入到该html
文件中,引完再打包到build
文件夹下,这一步可以通过配置插件自动地来实现。
4. 配置插件
通过配置插件html-webpack-plugin
可以将html
文件打包到build
下,可以自动引入生产的js
文件。
(1)html-webpack-plugin
插件
-
安装插件
html-webpack-plugin
-
引入
通过require
引入,然后new
一个实例,传入对象,确定我们是以index.html
这个文件为固定模板自动引入生产的js
文件,而无需我们手动导入,首先在src
目录下新建index.html
:
在配置文件中配置:
// 基于node的 遵循commonJS规范
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: "./src/index.js",
output: {
filename: 'build.js',
path: path.resolve('./build')
}, // 出口
devServer: {
contentBase: './build',
port: 3000,
compress: true,
open: true
},
module: {}, // 模块配置
plugins: [ //插件的配置
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development', // 可以更改模式
resolve: {}, // 配置解析
}
我们可以运行npm run build
打包出一个真实的build.js
文件,打包之后我们可以发现在build文件夹下已经打包出两个实体文件了:
并且打包生成的index.html
中已经自动引入了打包后的build.js
:
这时候我们希望修改title
标签的内容,可以在配置文件中设置参数:
plugins: [ //插件的配置
new HtmlWebpackPlugin({
template: './src/index.html',
title: 'excellent coder!'
})
],
在打包前的src/index.html
中通过ejs
模板设置:
再次打包看打包后的build/index.html
:
其中的title
标签的内容已经换成了我们设置的excellent coder!
了。当我们执行npm run build
,要将代码打包上线,那么我们希望打包出来的代码压缩成一行并且删除掉属性的双引号,可以继续配置:
plugins: [ //插件的配置
new HtmlWebpackPlugin({
template: './src/index.html',
title: 'excellent coder!',
minify: {
removeAttributeQuotes: true, // 删除双引号
collapseWhitespace: true // 代码折叠成一行
}
})
],
执行npm run build
,打包出来的文件:
// build/index.html
<!DOCTYPE html><html lang=en><head><title>excellent coder!</title><meta http-equiv=Content-Type content="text/html;charset=UTF-8"><meta name=viewport id=WebViewport content="init