该项目地址：https://gitee.com/lxx147258/learn-wepack
前言
在lesson01中，我们初步体验了webpack是怎么打包的，是直接使用了webpack命令，那么这节我们来看一下webpack的配置，使用配置该如何进行打包。
实施步骤
- 初始化项目
D:\learn-webpack\lesson02>npm init -y
- 安装依赖
D:\learn-webpack\lesson02>npm i webpack webpack-cli -D
- 新建webpack的配置文件webpack.config.js（该文件名称为默认名称）
// webpack.config.js文件内容
let path = require('path');
module.exports = {
entry: './src/index.js', // 打包入口文件
output: {
filename: 'bundle.[hash:6].js', // 指定打包后的文件名称,其中[hash:6]可为文件生成6位hash码
path: path.resolve(__dirname, 'dist') // 打包后的目录
}
}
- 在根目录（lesson02）下新建配置文件（webpack.config.js）中的入口文件夹src和文件index.js
// lesson02/src/index.js文件内容
console.log('hello webpack');
- 执行打包命令，webpack命令默认查找配置文件（webpackconfig.js）,并根据配置项执行打包
D:\learn-wepack\lesson02> webpack
- 在根目录下创建index.html文件并引入打包后的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
-
用浏览器打开index.html，就可以在控制台中看到结果。
猿术.png
