1.前端工程化
2.webpack安装
在webpack 4.x和5.x的版本中,有如下的默认约定:
- 默认的打包入口文件为src ->index.js
- 默认的输出文件路径为dist ->main.js
可以在webpack.config.js中修改打包的默认约定
2.1 webpack.config.js的配置
在webpack.config.js配置文件中,通过entry节点指定打包的入口。通过output节点指定打包的出口。示例代码如下:
const path = require('path') //导入node.js中专门操作路径的模块
module.exports = {
entry: path.join(__dirname, './src/index.js'), //打包入口文件的路径
output: {
path: path.join(__dirname, './dist'), //输出文件的存放路径
filename: 'bundle.js' //输出文件的名称
}
}
3.webpack第三方插件
webpack通过安装和配置第三方的插件,可以拓展文本webpack的能力,从而让webpack用起来更方便。最常用的webpack插件有如下两个:
-
webpack-dev-server
类似于node.js用到的nodemon工具
每当修改了源代码,webpack会自动进行项目的打包和构建 -
html-webpack-plugin
webpack中的html插件(类似于一个模板引擎插件)
可以通过此插件自定制index.html页面的内容 -
dev-server
dev-server插件的作用是 webpack打包好资源以后,将自动访问打包完成的地址,不用再手动复制到浏览器 进行访问了
3.1 webpack-dev-server的安装及配置
webpack-dev-server的作用是:当代码修改后,保存代码会自动将代码进行打包,不必再运行 npm run dev
配置webpack-dev-server
-
修改package.json ->scripts中的dev命令如下:
"script":{ "dev":"webpack serve", //script节点下的脚本可以通过npm run执行 }
-
再次运行npm run dev命令,重新进行项目的打包
-
在浏览器中访问http://localhost:8080地址,查看自动打包的效果
注意:webpack-dev-server会启动一个实时打包的http服务器,所以访问资源的时候就不再使用file协议而是http协议
3.2 html-webpack-plugin的安装及配置
安装webpack插件html-webpack-plugin
此插件的作用是将指定页面复制一份放到根目录。实现的作用是访问首页时自动跳转到src目录下的index.html中
配置html-webpack-plugin
//导入HTML插件得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
//创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
template: './src/index.html', //指定文件的存放路径
filname: './index.html', //指定生成文件的存放路径
})
module.exports = {
mode: 'development',
plugins: [htmlPlugin], //通过plugin节点,使htmlPlugin插件生效
}
3.3 dev-server的安装及配置
dev-server插件的作用是 webpack打包好资源以后,将自动访问打包完成的地址,不用再手动复制到浏览器进行访问了。配置文件如下下面所示: