初识webpack

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插件有如下两个：

1. webpack-dev-server
   类似于node.js用到的nodemon工具
   每当修改了源代码，webpack会自动进行项目的打包和构建

2. html-webpack-plugin
   webpack中的html插件（类似于一个模板引擎插件）
   可以通过此插件自定制index.html页面的内容

3. dev-server
   dev-server插件的作用是 webpack打包好资源以后，将自动访问打包完成的地址，不用再手动复制到浏览器 进行访问了

3.1 webpack-dev-server的安装及配置

webpack-dev-server的作用是：当代码修改后，保存代码会自动将代码进行打包，不必再运行 npm run dev

配置webpack-dev-server

1. 修改package.json ->scripts中的dev命令如下：

   "script":{
   	"dev":"webpack serve", //script节点下的脚本可以通过npm run执行
   }
   

2. 再次运行npm run dev命令，重新进行项目的打包

3. 在浏览器中访问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打包好资源以后，将自动访问打包完成的地址，不用再手动复制到浏览器进行访问了。配置文件如下下面所示：