webpack的使用

webpack的安装与配置

在项目中安装webpack
在终端运行如下命令，安装webpack相关的两个包：
npm install [email protected] [email protected] -D
在项目中撇脂webpack
1、在项目根目录中，创建名为webpack.config.js 的webpack配置文件，并初始化

2、在package.json的script节点下，新增dev脚本

3、在终端中运行npm run dev 命令，启动webpack 进行项目的打包构建
4、自定义打包的入口与出口
在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口。

webpack-dev-server插件的配置与安装

每当修改源代码，webpack会自动进行项目的打包和创建
安装地址：
npm install [email protected] -D
配置：
1、修改package.json - scripts 中的dev命令如下
2、再次运行npm run dev命令，重新进行项目的打包
3、在浏览器中访问http：//localhost:8080地址，查看自动打包效果

html-webpack-plugin

安装地址：
npm install [email protected] -D
配置过程：
1、导入html插件，得到一个构造函数
const HtmlPlugin = require(‘html-webpack-plugin’)
2、创建html插件的实例对象
const htmlPlugin = new HtmlPlugin({
template:’./src/index.html’指定源文件的存放路径
filename:’./index.html’ 指定生成文件的存放路径
})
module.exports ={
mode:‘devlopment’,
plugins:[htmlPlugin],通过plugins节点，使htmlPlugin插件生效
}

devServer节点

devServer:{
	open:true,//初次完成打包后，自动打开浏览器
	host:'127.0.0.1',//主机地址
	port:80,