該項(xiàng)目地址：https://gitee.com/lxx147258/learn-wepack
前言
在lesson01中谊却，我們初步體驗(yàn)了webpack是怎么打包的劣砍，是直接使用了webpack命令，那么這節(jié)我們來(lái)看一下webpack的配置狼电，使用配置該如何進(jìn)行打包。
實(shí)施步驟
- 初始化項(xiàng)目
D:\learn-webpack\lesson02>npm init -y
- 安裝依賴(lài)
D:\learn-webpack\lesson02>npm i webpack webpack-cli -D
- 新建webpack的配置文件webpack.config.js（該文件名稱(chēng)為默認(rèn)名稱(chēng)）
// webpack.config.js文件內(nèi)容
let path = require('path');
module.exports = {
entry: './src/index.js', // 打包入口文件
output: {
filename: 'bundle.[hash:6].js', // 指定打包后的文件名稱(chēng),其中[hash:6]可為文件生成6位hash碼
path: path.resolve(__dirname, 'dist') // 打包后的目錄
}
}
- 在根目錄（lesson02）下新建配置文件（webpack.config.js）中的入口文件夾src和文件index.js
// lesson02/src/index.js文件內(nèi)容
console.log('hello webpack');
- 執(zhí)行打包命令圾亏，webpack命令默認(rèn)查找配置文件（webpackconfig.js）,并根據(jù)配置項(xiàng)執(zhí)行打包
D:\learn-wepack\lesson02> webpack
- 在根目錄下創(chuàng)建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>
-
用瀏覽器打開(kāi)index.html龄坪，就可以在控制臺(tái)中看到結(jié)果。
猿術(shù).png
