learn-webpack（lesson02）

该项目地址：https://gitee.com/lxx147258/learn-wepack

前言

在lesson01中，我们初步体验了webpack是怎么打包的，是直接使用了webpack命令，那么这节我们来看一下webpack的配置，使用配置该如何进行打包。

实施步骤

1. 初始化项目

D:\learn-webpack\lesson02>npm init -y

2. 安装依赖

D:\learn-webpack\lesson02>npm i webpack webpack-cli -D

3. 新建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') // 打包后的目录
    }
}

4. 在根目录（lesson02）下新建配置文件（webpack.config.js）中的入口文件夹src和文件index.js

// lesson02/src/index.js文件内容
console.log('hello webpack');

5. 执行打包命令，webpack命令默认查找配置文件（webpackconfig.js）,并根据配置项执行打包

D:\learn-wepack\lesson02> webpack

6. 在根目录下创建index.html文件并引入打包后的文件

7. 用浏览器打开index.html，就可以在控制台中看到结果。

   
   
   猿术.png