前言

在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>