概念
loader:
webpack 只能理解 JavaScript 和 JSON 文件。
loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效模块,以供应用程序使用,以及被添加到依赖图中
对模版文件资源文件等需要预处理的文件进行转化和预处理,提供前端构建的方法
用于对模块的源码进行转换。 在import 或者加载的时候预处理文件
plugins:
解决 loader 无法解决的其他问题,执行范围更广的任务,包括:打包优化,资源管理,注入环境变量
entry:
构建依赖图的开始的模块
output:
在哪里输出创建的 bundle 。以及如何命名这些文件
mode: development, production, none
browswer compatibility
起步
安装 node.js
安装 nvm 或 n ( 管理node 版本)
1 | mkdir webpack-project |
安装
1 | npm install webpack webpack-cli --save-dev |
配置
webpack.config.js 配置文件
1 | { |
使用
node_modules/.bin/webpack
通常状态下我们会使用软连接,来简化我们使用命令
在 package.json scripts 中配置
1 | "scripts": { |
在终端中使用 npm run build
完善
当我们在项目中使用 ES6 、ES7 要使用babel 进行转化
使用 babel
安装
1 | npm i @babel/core @babel/preset-env @babel-loader -D |
“@babel/preset-env” 是常用环境的预设
创建 .babelirc 文件
1 |
|
使用 react
1 | npm i react react-dom @babel/preset-react -d |
最终1
2
3
4
5
6
7
{
"presets": [
"@babel/preset-env"
"@babel/preset-react"
]
}
补充中:
// 解析es6 和 react jsx
// 解析 less css
/// 解析图片和字体
文件监听
–watch 需要手动刷新
webpack.confog.js
watch: true
热更新
webpack-dev-middleware
文件指纹 —> 版本发布
文件压缩
ugliyfy
optimize
html-webpack-plugin 设置 minify
postcss-loader auto-prefix
to rem
raw-loder
多页面打包
source-map
webpack 增强功能
clean-webpack-plugin
自动补全
splitChunksPlugin
scope hoiting
备忘:
npm install 安装依赖
npm run upload ——> git pull
npm run publish –> vue-cli-servce build && npm run cdn