webpack学习（一、入口与出口）

安装

使用 webpack ，第一步先安装：

1. 初始化项目
   npm init -y
   （-y 是指一路选择 ‘yes’ ，即选择默认项）
2. 安装webpack、webpack-cli
   npm install webpack webpack-cli
   （如果安装过淘宝镜像，可以使用cnpm更快）

打包

进入到项目的文件夹，命令：
npx webpack
就可以生成dist文件夹

编写webpack配置文件

在src的同级目录下创建文件webpack.config.js

创建好了就可以开始编写啦！

今天写的是入口和出口：

const path = require('path')
module.exports={
	mode: 'development',
	// 入口
  entry: {
		// 多个入口的写法
		main: './src/index.js', // 入口的路径
		sub: './src/index.js'
	},
	// 出口
	output: {
		path: path.resolve(__dirname,'dist'), // 出口的路径
		filename: '[name].js' // 出口的文件名
	}
}

• 在出口中，path的写法也可以和入口一样，但上述写法更为常见 ，__dirname为一个全局变量，它指向当前脚本所执行的目录，用这种方法我们可以只写一条语句，而不用写多条出口的路径。
• 出口的文件名使用'[name].js'的写法同样是灵活的写出口文件名
• 当我们想把资源放到CDN上时，往往会

配置好webpack后 npx webpack 会发现在dist文件夹中生成 main.js 和 sub.js 文件

html-webpack-plugin插件

要想运行起来我们的项目，还需要在dist文件夹中加上html文件，在html文件中引入我们的两个入口文件，但如果再增加一个入口文件，我们还要手动修改，于是我们可以借助 html-webpack-plugin插件 来自动的生成html文件。

• 安装插件
  npm install --save-dev html-webpack-plugin
• 修改webpack.config.js
  在webpack.config.js中添加plugins项：

const path = require('path')
// 插件html-webpack-plugin 用于用于编译 Webpack 项目中的 html 类型的文件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports={
	mode: 'development',
	// 入口
  entry: {
		// 多个入口
		main: './src/index.js',
		sub: './src/index.js'
	},
	// 出口
	output: {
		path: path.resolve(__dirname,'dist'),
		filename: '[name].js'
	},
	plugins: [
		new HtmlWebpackPlugin()
	]
}

ps: html-webpack-plugin 仓库源码

publicPath

当我们想把资源放到CDN上时，往往会在引入时，前面加上地址：

<script src="http://cdn.xx.com/main.js"></script>

我们可以通过在webpack.config.js里的output配置项加上publicPath解决：

const path = require('path')
// 插件html-webpack-plugin 用于用于编译 Webpack 项目中的 html 类型的文件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports={
	mode: 'development',
	// 入口
  entry: {
		// 多个入口
		main: './src/index.js',
		sub: './src/index.js'
	},
	// 出口
	output: {
		publicPath: 'http://cdn.xx.com/',
		path: path.resolve(__dirname,'dist'),
		filename: '[name].js'
	},
	plugins: [
		new HtmlWebpackPlugin()
	]
}

此时html-webpack-plugin插件生成的index.html引入文件时，前面就会自动加上http://cdn.xx.com/

---

小伙伴们建议参照 官方文档 使用，如果有不正确的地方欢迎指出哦~

更于2021/8/18