01 为什么需要webpack构建工具？
需要转化ES6及以上的语法，因为低版本浏览器不支持ES6及以上的语法
需要转化jsx的语法等
需要补齐css的前缀，因为不同浏览器对于css样式的兼容不同需要加前缀，以及预处理器。
压缩混淆，压缩代码 图片等。02 初始webpack：配置文件的名称
webpack默认的配置文件是 webpack.config.js文件
可以通过webpack --config 指定配置文件
03 webpack的配置组成
module.exports = {
entry:'./src/index.js', @1 打包的入口文件
output:'./dist/main.js', @2 打包的出口文件
mode:'production', @3 环境
module:{
rules:[ {test:/\.txt$/, use:'raw-loader'} ] @4 解析的loader
},
plugins:[ @5 插件配置
new HtmlwebpackPlugin({
template:'/src/index.html'
})
]
}04 webpack环境的安装
第一步 打开终端安装nvm：通过curl安装执行命令如下：
curl -o- https://raw.githubusercontent.com/nvm/v0.34.0/install.sh | bash
第二步 将nvm添加到环境变量中去：执行如下的代码
soure ~/.bash_profile
第三步 检测nvm是否安装成功：执行如下命令
nvm list 可以查看到已经安装的node的版本
第四步 安装node.js:执行如下的代码
nvm install v10.15.3 ； 对应的node.js的版本号；05 创建初始的项目并按照webpack和webpack-cli；
终端执行：mkdir mv-project; 创建了mv-project的目录
进入目录：cd mv-project
初始化项目： npm init -y
安装webpack和webpack-cli: npm install webpack webpack-cli --save-dev
查看webpack安装的版本终端中执行： ./node_modules/.bin/webpack -v
上面的代码相当于在执行webpack这个打包工具。06 简单的列子来看webpack的打包流程：
第一步 创建webpack.config.js配置文件及相关脚本
const path = require('path')
module.exports = {
mode:'production',
entry:'./src/index.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
}
}第二步 需要在项目的跟目录下创建src目录以及index.js，hello.js文件
hello.js文件代码如下：
export const hello = ()=>{
return 'hello webpack'
}index.js文件的代码如下：
import {hello} from './hello.js'
document.write(hello())
console.log(hello())第三步 执行打包的命令：在终端中执行如下命令：
./node_modules/.bin/webpack第四步 打包的结果 会在项目的根目录中创建一个dist目录并有一个bundle.js文件
同时需要创建index.html文件导入webpack打包生成的dist目录下的bundle.js的文件
<HTML>
<head>
<body>
<script src='./dist/bundle.js'></scrit>
</body>
</head>
</Html>07 简化./node_modules/bin/webpack打包的命令：通过npm run build进行打包
在package.json文件中：scripts对象中创建执行webpack脚本的命令：
原理：模板局部安装会在node_modules/.bin目录下创建软连接
{
"name": "vue2code",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
}
}
