webpack学习日记

下载webpack

npm i webpack webpack-cli -D		// npm 下载
yarn add webpack webpack-cli -D		// yarn 下载
// 扩展  -D == --save-dev   将该包作为开发依赖加入到模块中
// 		-S == --save  将该包作为运行依赖加入到模块中

创建webpack配置文件

• 在项目文件夹的根目录下面创建webpack.config.js文件用来编写webpack的一些复杂的配置。

webpack官方文档

https://www.webpackjs.com/guides/getting-started/ （可以通过官方文档查看webpack的一些插件和配置选项等）

webpack的一些基本的配置详解

1. entry入口配置

entry：入口文件配置，属性名：entry，属性值：入口文件的相对路径。所有的css、js、图片资源等都要导入到入口文件中

// webpack.config.js 文件
module.exports = {
	entry: './src/main.js'
}

2. output 输出配置

output：指示webpack打包的文件输出到哪里去、如何命名等。
output中的path字段一定要是绝对路径，不然打包会报错

// 解析：因为webpack是运行于node环境下面的，所以要使用commonjs的语法来进行导入导出
const path = require('path');
module.exports = {
	output: {
		filename: 'bundle.js',
		path: path.resolve(_dirname, './dist'),
		clean: true			// 是否清除上一次的打包的文件
	}
}

3. devtool 配置项

配置 devtool 可以更直观的观察代码中的错误，浏览器可以锁定代码中的错误

// webpack.config.js
module.exports = {
	devtool: 'inline-source-map'
}

4. dev-server 配置项

设置该配置项，webpack 会为你提供一个服务器。配置了这个配置项之后，可以帮助你实时监听代码文件的修改变化（如果是配置文件改变了，需要先执行 npx webpack 命令先编译打包，然后在运行 npx webpack-dev-server 因为这个只能是编译代码文件的），触发重新编译。也能实现浏览器的实时更新。

// 准备工作
//	1、安装 webpack-dev-server    
	yarn add webpack-dev-server -D

// webpack.config.js
module.exports = {
	devServer: {
		static: './dist'
	}
}

// 运行 
npx webpack-dev-server --open 			// 自动打开浏览器

webpack的打包命令

npx webpack ./src/main.js --mode=development
// ./src/main.js是webpack打包的入口文件
// --mode=development 是代表已开发模式打包
// npx webpack 使用局部下载的webpack进行配置

npx webpack --watch			// 可以监听代码文件的修改，然后重新触发编译

webpack的两种模式

• 开发模式：编译代码（development）
• 生产模式：编译并压缩代码（production）