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": {}
}
---【DOM】)
![[蓝桥杯练习]通电](http://pic.xiahunao.cn/[蓝桥杯练习]通电)
)
