安装 webpack
npm install --save-dev webpack
如果使用 webpack 4.0 还需要安装
npm install --save-dev webpack-cli
webpack支持零配置，安装既可以打包，也可以自动配置
在没有配置的情况下，默认查找项目中
index.js为打包入口, 找不到则无法打包
打包命令
npx webpack
npx webpack --config webpack.base.config.js 指定配置文件
npx webpack -- --colors 传递参数
配置打包命令的快捷方式
package.json -> scripts 下增加
开发环境
"dev": "webpack --config ./webpack.dev.config.js"
生产环境
"build": "webpack --config ./webpack.prod.config.js"
自定义配置文件
根目录下创建 webpack.config.js
再次 npx webpack 会从 webpack.config.js 读取配置
context
// 上下文是入口文件所处的目录的绝对路径的字符串。
// 指定后的上下文 F:\my\webpack-template\webpack
// 指定上下文之后 会影响以后的路径
// 见 entry
context: path.resolve(__dirname, 'webpack'),
复制代码mode 模式
- development
- productions
- none
entry 入口
entry: {
// 单页面
index: './src/index.js',
index: ['./src/index.js', './src/js/a.js'],
// 多页面
index: './src/index.js',
page1: './src/page1.js',
page2: './src/page2.js'
// 指定 context
// index: '../src/index.js'
// index: ['../src/index.js', '../src/js/a.js']
},
复制代码output 出口
output: {
filename: '[name].js', // 动态名字， 根据入口而定
// filename: '[name].[hash].js', // hash 缓存
path: path.resolve(__dirname, 'dist'), // 目录对应一个绝对路径
publicPath: '/', // 引用资源的地址
}
复制代码module 模块
决定如何处理项目中的不同类型的模块
复制代码-
rules 规则 配置
loader,loader用于对模块的源代码进行转换style-loader将模块的导出作为样式添加到 DOM 中style-loader导致loader创建的 CSS 优先于目标中已经存在的 CSS (可通过insert来配置插入的位置)css-loader解析 CSS 文件后(将 CSS 转化成 CommonJS 模块)，使用 import 加载，并且返回 CSS 代码sass-loader将 Sass 编译成 CSSurl-loaderfile-loader处理图片limit: 1024, // 当大于这个值时 默认使用 file-loader 处理babel-loader将 ES2015 转换成 ES5babel-loader @babel/core @babel/preset-env
resolve 配置模块如何解析
```javascript
resolve: {
modules: ["node_modules"], // 告诉 webpack 解析模块时应该搜索的目录。
extensions: ['.js', '.scss', '.css', '.jpg', 'jpge', '.png', '.gif'], // 文件后缀
alias: { // 别名
'@BScss': path.resolve(__dirname, 'node_modules/bootstrap/dist/css/'),
'@js': path.resolve(__dirname, 'src/js')
}
}
```
复制代码plugins 插件
- webpack-dev-server 开发服务器
npm install webpack-dev-server -D
配置项 devServer
devServer: {
// 启动热更新
// 必须有 webpack.HotModuleReplacementPlugin 才能完全启用 HMR
// 启动时 添加参数 "dev": "webpack-dev-server --hotOnly --config ./webpack.dev.config.js"
hot: true,
port: 8080,
contentBase: './dist', // 告诉服务器从哪里读取资源
open: true, // 自动打开浏览器
}
复制代码修改启动命令
"scripts": {
- "dev": "webpack --config ./webpack.dev.config.js"
+ "dev": "webpack-dev-server --config ./webpack.dev.config.js"
},
复制代码-
clean-webpack-plugin 清空目录
-
copy-webpack-plugin 复制文件夹、文件
to: ''为空时默认输出到output中指定的目录 -
html-webpack-plugin 生成一个 HTML5 文件， 将 webpack 打包后的 js 插入 body 中 单页面配置一个、多页面配置多个
-
mini-css-extract-plugin 提取 css 到单独的文件并压缩
代替 extract-text-webpack-plugin
-
purifycss-webpack CSS中删除未使用的选择器
需配合 mini-css-extract-plugin 一起使用 如果没有输出任何CSS文件，则此插件将无效
-
autoprefixer 配合 postcss-loader 实现样式前缀的自动填充
提供浏览器的最佳方法是
.browserslistrc在项目根目录中添加一个文件，
或在package.json中添加一个browserslistkey。// package.json "browserslist": [ "> 1%", "last 2 versions" ] 复制代码postcss-loader放在style-loadercss-loader之后
postcss-loader放在sass-loader之前 -
webpack.IgnorePlugin 忽略一些包中引入的其它的包
// 忽略 moment 中默认的语言包 new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) // 忽略后 需要设置语言包时需要手动引入 import 'moment/locale/zh-cn' 复制代码 -
webpack.DllPlugin 提前打不不经常变动的依赖包，提升构建速度
output.library必须与webpack.DllPlugin(options)options.name一样
-
add-asset-html-webpack-plugin 将 webpack.DllPlugin 打包好的依赖包 插入 html 中
-
happypack 多线程打包，提升构建速度
可以处理 js、css
大型项目效果更好 -
new webpack.DefinePlugin 编译期间添加的全局常量
optimization 优化
- splitChunks 分割代码
复制代码- 懒加载
// 懒加载会另外打包成一个 js
// 通过 jsonp 的形式实现动态加载的
const Lazy = () => import('@js/lazy')
setTimeout(() => {
Lazy().then(_ => {
_.default.subtraction(3, 5)
})
}, 1000)
// 配合下面的使用
// 分离出 costomVue
custom: {
test: path.resolve(__dirname, './src/js'),
name: 'custom',
chunks: 'all',
minChunks: 2
}
复制代码-
使用 vue
通过
yarn add vue安装的vue
在import vue from 'vue'时 使用的是vue.runtime.common.js版本 vue -> package.json "main": "dist/vue.runtime.common.js"我们需要的是
vue.js
需要配置别名'vue$': 'vue/dist/vue.js'
博文推荐
- 笔记：Vue 常见面试题汇总及解析
- Vue3.0 中 Object.defineProperty 的代替方案 Proxy
- vue 3.0 —— 之初体验一
- 一张图搞懂原型、原型对象、原型链
- Promise 原理篇 = 从 0 到 1 构建一个 Promise
【笔记不易，如对您有帮助，请点赞，谢谢】