环境搭建：安装Node.js 和 NPM
安装`nvm` [https://github.com/nvm-sh/nvm](https://github.com/nvm-sh/nvm)
ps: nvm(Node.js Version Manager)也就是 Node.js 的包管理器，可以通过它方便安装和切换不同的Node.js版本。
Mac通过 curl 安装：`curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash`
Windows的安装方法 参考[这里](https://www.jianshu.com/p/0d591ad6d60d)
检查node和NPM版本安装成功如下：
环境搭建：安装webpack和webpack-cli
创建空目录和package.json
- mkdir webpack.1-1
- cd webpack.1-1
- npm init -y
安装 webpack 和 webpack-cli
- npm install webpack webpack-cli --save-dev
- 检查是否安装成功 webpack -v
在项目根目录下创建一个`webpack.config.js` 文件
'use strict';
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),// 打包的文件夹名
filename: 'bundle.js' // 打包的文件名
},
mode: 'production'
}
同时，在项目根目录下，创建src文件夹及其子文件`helloworld.js`和`index.js`
helloworld.js
export function helloworld() {
return 'hello webpack';
}
index.js
import { helloworld } from './helloworld';
document.write(helloworld());
这样一个简单的demo就完成了，在工程命令行中执行命令 `webpack`开始打包工程。
打包好的结果是这样的：
由于我们打包出来的dist文件夹下面是没有html文件的，所以我们在dist文件夹下新建一个`index.html`文件，然后将bundle.js引进来。然后在浏览器中打开，一个简单的demo效果就出来了。
总结一下：
'use strict';
const path = require('path');
module.exports = {
entry: './src/index.js', // 用来指定webpack的打包入口
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js' // 打包的文件名
},
mode: 'production'
}
`index.html`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Webpack</title>
</head>
<body>
<script src="./bundle.js" type="text/javascript"></script>
</body>
</html>
