1.基本准备
安装稳定版本的node.js,没有安装可以点击https://pan.baidu.com/s/1f4YhtpTFBKBZrzYVO1xHDw下载，提取码：1234。或者在node官网Node.js (nodejs.org)下载。
2.创建demo项目，安装webpack
在对应文件夹里创建一个demo1文件夹，然后执行命令
npm init -y
执行命令后会生成一个package.json文件
然后执行以下命令安装webpack.
npm install --save-dev webpack@4.43.0 webpack-cli@3.3.12
安装完成后就会出现node_modules和package-lock.json。webpack是webpack核心包，webpack-cli是命令行工具包，在用命令行执行webpack的时候需要安装。
3.简单测试
创建src文件夹，并且在src文件夹中创建index.html, test1.js, test2.js文件
内容分别如下：
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html>
test2.js
export const name = "dongdong";test1.js
import { name } from './test2.js'console.log(name);
接下来我们可以尝试在index.html中引入test1.js，看看是否会打印"dongdong"。
通过谷歌浏览器打开index.html后，在控制台可以看到会报错。
test1.js:1 Uncaught SyntaxError: Cannot use import statement outside a module这个报错原因是因为浏览器对原始的ES6模块默认引入方式不支持。
接下来我们就来尝试通过webpack将test1.js 和test2.js打包成一个js文件来引入。
在控制台输入
npx webpack src/test1.js -o bundle.js这条命令会根据引入的顺序将所有的文件都打包到一个文件中。
接下来我们在index.html中引入bundle.js后看看。
刷新浏览器
我们会发现，已经成功的执行了test1.js中的console.log(name)。说明文件打包是没有问题的。
4.webpackp配置
在写好webpack的配置文件后，我们在打包时只需要执行npx webpack命令,就可以直接打包。
现在根目录下建立一个webpack.config.js文件，代码如下：
const path = require('path');module.exports = {entry: './src/test1.js', // 打包入口output: { // 打包出口path: path.resolve(__dirname, ''),filename: 'bundle.js' // 打包出来的文件名},mode: 'none' // 打包模式};
在这里，我们可以配置入口和出口，这里我设置的入口就是test1.js文件，出口的路径path为：path.resolve(__dirname, '')表示的其实就是当前文件夹根目录的绝对路径。filename：就是生成的打包文件名称。mode是Webpack的打包模式，默认是'production'，表示给生产环境打包的。现在我们设置成'none'，这样代码就不会压缩了。
接下来我们执行：
npx webpack结果：
刷新浏览器,同样可以打印成功。
5.小结
今天主要学习内容：
demo项目建立和安装webpack打包测试和webpack配置