一、webpack安装
首先新建一个空文件夹，在改文件夹下打开命令行，输入npm init -y 创建一个package.json文件。
然后在package.json中填好一些基本信息，一个基本的package.json内容大致如下：
package.json
{
"name": "webpack-train",
"version": "1.0.0",
"description": "webpack4",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/lycHub/webpack-train.git"
},
"keywords": ["webpack4"],
"author": "Madao",
"license": "ISC",
"bugs": {
"url": "https://github.com/lycHub/webpack-train/issues"
},
"homepage": "https://github.com/lycHub/webpack-train#readme"
}webpack推荐使用局部的安装方式，即在项目根目录下执行如下命令：
npm install webpack webpack-cli -D然后会多出一个node_modules的目录，这个目录将会存放各种工具包。
二、准备工作
在打包前，我们先来新建一下目录和文件，并添加内容
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root">
</div>
<script src="https://cdn.bootcss.com/lodash.js/4.17.12-pre/lodash.min.js"></script>
<script src="./src/index.js"></script>
</body>
</html>src/index.js：
window.addEventListener('DOMContentLoaded', function() {
function component() {
const root = document.getElementById('root');
root.innerHTML = _.join(['Hello', 'webpack'], ' ');
}
component();
});此时打开浏览器运行index.html，页面应该能出现 Hello webpack
三、webpack打包方式介绍
- 方法一：
根目录下执行：
.\node_modules\.bin\webpack然后webpack会执行打包命令并在根目录下生成dist文件夹：
- 方法二：
根目录下执行：
npx webpacknpx是npm自带的一个命令，效果同方法一
- 方法三（推荐）：
在package.json的scripts选项中添加如下任务
然后在根目录下执行
npm run build也可以打包成功并生成dist文件
四、测试打包后的代码
webpack默认会将src/index.js打包生成main.js并放入dist文件夹中，现将index.html复制到dist中并做如下修改
dist/index.html：
<!-- 省略部分代码 -->
<script src="https://cdn.bootcss.com/lodash.js/4.17.12-pre/lodash.min.js"></script>
<!-- <script src="./src/index.js"></script> -->
<script src="./main.js"></script>
<!-- 省略部分代码 -->然后打开浏览器运行dist/index.html
这样就完成了webpack的安装与基本的打包操作，只不过打包时用的都是默认配置
下节：基本配置与mode
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。