1. 建立项目
1.1 初始化一个项目
起首装置nodejs，翻开 nodeJs官网 直接下载装置即可，装置终了后翻开敕令行东西，进入你的项目文件夹，实行
npm init 举行项目的初始化：
历程中会让你填写项目名、版本、形貌、堆栈地点、关键字等信息，能够不填一起回车，实行终了后会在根目录下建立一个 package.json 文件，如许就初始化完毕了。
1.2 装置webpack
因为在webpack4中已不再默许装置 webpacl-cli，所以我们要手动装置，在敕令行实行 npm i webpack webpack-cli -D 即可。关于大多数项目，发起当地装置。这能够使我们在引入损坏式变动(breaking change)的依靠时，更轻易离别晋级项目。
2. 打包第一个JS文件
起首，我们在根目录下建立一个 webpack.config.js 文件和一个src文件夹。然后在src中建立一个 main.js 文件，以下：
在 main.js 中写一行
alert('hello world')
然后翻开 webpack.config.js ，举行webpack的设置：
const path = require('path')
let config = {
mode: 'none',
entry: {
main: path.join(__dirname, './src/main.js')
},
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, './dist')
}
}
module.exports = config
我们设置了一个名为 main 的进口，并以 src 下的 main.js 作为进口文件，然后输出到根目录下的 dist 文件夹中。
在webpack4中，我们须要设置 mode 属性，用来决议当前是development照样production环境，webpack会根据此值来举行一些默许操纵，两种环境的差别设置背面的博文会详解，这里我们设置为 ‘none’ ，来防止默许操纵。前文已说过，path 是 nodeJs中的中心模块用来操纵途径，__dirname 示意文件的当前途径（此时为根途径）。而 output中的filename属性，[name] 示意进口的称号，此处就是 main。
接下来翻开 package.json 文件，来编写一条敕令实行webpack的打包。在 script 中增加：
"build": "webpack --config webpack.config.js --progress --colors"
webpack –config path/to/your/file/file.js 示意实行某个设置文件，–progress能够让我们看到打包的进度 ， –colors 开启敕令行色彩显现，更多的webpack敕令参数人人能够另行查阅。
然后就能够在敕令行实行：npm run build，实行终了后，我们能够看到，在根目录下多了一个 dist 文件夹 并有一个 main.bundle.js文件，这就是webpack为我们打包出来的静态资本，而文件途径就是我们在 output 中设置的值。
为了演示打包好的 main.bundle.js ，我们在根目录下建立一个 index.html ，并引入main.bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/main.bundle.js"></script>
</body>
</html>在浏览器中翻开 index.html，可见main.js中的代码已被实行了：
在IDE中翻开main.bundle.js，代码的最底部能够看到我们在main.js中写的代码。
至此，我们的第一次 webpack 打包就胜利了。
