一、下载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
