webpack打包工具的使用笔记

一、下载webpack

1、系统环境如下：

C:\Users\admin>node -v
v16.15.1

C:\Users\admin>npm -v
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
8.11.0

2、全局下载webpack

npm install -g webpack webpack-cli

3、安装完查看版本号

webpack -v

查询到的版本好如下

webpack: 5.74.0
webpack-cli: 4.10.0
webpack-dev-server not installed

二、使用方法

1、创建src和dist目录
2、在src目录下创建所需的js文件，然后再创建main.js，引入这些js文件，代码示例如下：

const common = require('./common')
const utils = require('./utils')

common.info('Hello world!' + utils.add(100, 200))

3、在根目录下创建webpack.config.js，代码示例如下：

const path = require('path') // Node.js内置模块
module.exports = {
	entry: './src/main.js', //配置入口文件
	output: {
		path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
		filename: 'bundle.js', //输出文件
	},
}

4、在根目录打开命令行，运行如下命令：
生产环境专用

webpack --mode=development     

或
产品环境专用

webpack

5、在根目录下创建01.html，代码示例如下：

<script src="./dist/bundle.js"></script>

三、测试

使用浏览器打开01.html
看见如下效果即为成功。

Hello world!300

四、压缩css文件

1、将css文件写在src目录下
2、在webpack.config.js添加如下配置：

const path = require('path') // Node.js内置模块
module.exports = {
	entry: './src/main.js', //配置入口文件
	output: {
		path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
		filename: 'bundle.js', //输出文件
	},
	// --------------以下是要添加的配置------------------
	module: {
		rules: [
			{
				test: /\.css$/, //打包规则应用到以css结尾的文件上
				use: ['style-loader', 'css-loader'],
			},
		],
	},
}

3、在根目录打开命令行，运行如下命令：
生产环境专用

webpack --mode=development     

或
产品环境专用

webpack