> ## :-: Git命令行操作
```
打包(压缩)
webpack demo.js -o demo.min.js
打包为生产环境(不压缩)
webpack demo.js -o demo.min.js --mode development
初始化工程
npm init
按配置文件下载
cnpm install
下载安装指定模块
cnpm install jquery
tree shaking -- 抖掉没有使用到的代码 (js/css)
- webpack 默认用的是 webpack.config.js 的配置文件。
$ webpack
- 可以指定webpack使用哪个配置文件(webpack-dev.config.js)进行打包。
$ webpack --config webpack-dev.config.js
```
> ## :-: 环境配置 (package.json)
:-: * 使用前需要把注解清除掉，否则会报错
```
// 首先初始化工程
npm init -y
// 会生成 package.json 文件，对其进行配置、
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
// scripts -- 配置开发环境
"scripts": {
// npm run run
"run": "webpack",
// npm run dev ---> 打包为开发环境
"dev": "webpack --mode development --color",
// 配置生产环境
// npm run prod ---> 打包为生产环境
"prod": "webpack --mode production --color",
// 命令：npm run demo
"demo": "webpack --config webpack-prod.config.js",
"server": "webpack-dev-server --open --color"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"glob-all": "^3.1.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"imagemin": "^7.0.0",
"imagemin-pngquant": "^8.0.0",
"img-loader": "^3.0.1",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.8.0",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"purifycss-webpack-plugin": "^2.0.3",
"style-loader": "^1.0.0",
"url-loader": "^2.1.0",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7",
"webpack-deep-scope-plugin": "^1.6.2",
"webpack-dev-server": "^3.8.0"
}
}
```
> ## :-: [webpack配置文件](https://www.webpackjs.com/concepts/configuration/#基本配置) (webpack.config.js)
```
// webpack.config.js 文件遵循的是 CommonJs规范
// 在node中获取path方法、路径
const path = require("path");
const glob = require("glob-all"); // glob-all -- 全局匹配(需要下载)。purifycss-webpack -- css tree shaking 依赖
// 引入插件(需要 cnpm install xxx 下载)
// html-webpack-plugin -- HTML插件，可以抽离出HTML文件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// webpack-deep-scope-plugin -- js深度tree shaking插件，该插件可以通过作用域分析消除无用代码(深度tree shaking)
const webpackDeepScopeAnalysisPlugin = require("webpack-deep-scope-plugin")
.default;
// ----- 报错
// // mini-css-extract-plugin -- 单独抽离css文件的插件。
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// purifycss-webpack -- css tree shaking插件(使用方法：https://www.npmjs.com/package/purifycss-webpack)
const PurifyCSSPlugin = require('purifycss-webpack');
// CSS加前缀(兼容处理)的插件：cnpm install postcss postcss-loader autoprefixer cssnano postcss-cssnext -D
// clean-webpack-plugin -- 删除上一次打包的dist目录
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
// ----- 报错
// // webpack -- 内置插件
// const webpack = require("webpack");
// webpack-dev-server -- 开启本地服务器(需要下载全局跟局部的，不然会报错)
// $ cnpm install webpack-dev-server -g
// $ cnpm install webpack-dev-server -D
module.exports = {
// 配置要打包的模式(mode)
// 生产环境(会压缩) -- 'production'
// 开发环境(不压缩) -- 'development'
mode: "production",
// entry -- 入口配置
// 单入口配置：entry: './entry.js',
// 多入口配置：entry: { pageA:'./src/entry/pageA.js', pageB:'./src/entry/pageB.js' }
entry: {
index: "./src/entry/index.js",
pageA: "./src/entry/pageA.js",
pageB: "./src/entry/pageB.js"
},
// output -- 输出配置
output: {
// path -- 是node中支持的变量、
// __dirname -- 当前目录路径、
// 输出的文件目录，没有则创建 -- path.resolve(__dirname, 'dist')
path: path.resolve(__dirname, "dist"),
// filename -- 输出的文件名(String)
// 单入口配置：filename: 'index.bundle.js'
// 多入口配置：filename: '[name] - [hash:5].bundle.js'
// [name] -- 可以根据entry对象的属性名打包成多个文件、否则都打包成一个文件、
// [hash:5] -- 5位哈希值
filename: "[name] - [hash:5].bundle.js",
// 配置导出的公共js模块文件、
chunkFilename: "[name] - [hash:5].commonality.js"
},
optimization: {
// 配置分离包 webpack新特性
splitChunks: {
// 缓存的
cacheGroups: {
// 抽离出来的模块名字、
common: {
// 名字
name: "common",
// 最小体积 -- 能被单独抽离出来的最小体积，默认30kb (30000)
minSize: 1,
// 最小次数 -- 被引入多少次，才属于公共的js模块、
minChunks: 2,
// 在那些范围内，进行寻找公共的js模块
chunks: "all",
// 优先级
priority: 1
},
vendor: {
// 名字
name: "vendor",
// 正则匹配
test: /[\\/]node_modules[\\/]/,
// 在那些范围内，进行寻找公共的js模块
chunks: "all",
// 优先级
priority: 10
}
}
}
},
// 模块(module) --- 引入loader处理文件(loader可以将所有类型的文件转换为webpack能够处理的有效模块)、
module: {
// loader：webpack自身只理解JavaScript，通过loader可以将所有类型的文件转换为 webpack 能够处理的有效模块。
// loader基本格式：rules: [ { test: /\.txt$/, use: 'raw-loader' } ]
rules: [
// test -- 被处理,正则匹配文件名 use -- 使用什么loader (从后往前执行)
// { test: /\.txt$/, use: 'raw-loader' }
// loader说明：将less文件解析成css行间样式。
// 下载依赖：cnpm install style-loader css-loader less --save-dev
// 1. less-loader -- less解析
// 2. css-loader -- 解析成css
// 3. style-loader -- 变成行间样式
// { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
// loader说明：将less文件解析成css，并单独抽离出css文件。
// 下载依赖：cnpm install mini-css-extract-plugin css-loader less --save-dev
// 1. less-loader -- less解析
// 2. css-loader -- 解析成css
// 3. MiniCssExtractPlugin.loader -- 单独抽离出css文件
// {
// // test -- 正则匹配文件名，被处理的文件
// test: /\.less$/,
// // use -- 使用什么loader (从后往前执行)
// // mini-css-extract-plugin -- 单独抽离css文件的插件。
// use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
// },
// loader说明：对图片进行处理
{
test: /\.(jpg|png|jpeg|gif)$/,
use: [
{
// 图片解析
loader: "url-loader",
// options -- 更加详细的配置
options: {
// [name] -- 用之前的文件名
// [hash:5] -- 5位哈希值
// [ext] -- 还是用之前的格式
name: "[name] - [hash:5].[ext]",
// 限制图片大小 <= 50kb 进行base64编码，若大于则被单独抽离成文件。
limit: 50000,
// outputpath -- 输出的路径(文件夹)
outputpath: "img"
}
},
{
// img-loader -- 用于图片的压缩
loader: "img-loader",
options: {
plugins: [
// 不同格式要用不同的参数
require("imagemin-pngquant")({
// quality -- 压缩的质量(0~1) 0 是最小的，1 是最完美的、
quality: [0.3, 0.5]
})
// 针对不同格式的图片处理。
// require("imagemin-gifsicle")({
// interlaced: false
// }),
// require("imagemin-mozjpeg")({
// progressive: true,
// arithmetic: false
// }),
// require("imagemin-pngquant")({
// floyd: 0.5,
// speed: 2
// }),
// require("imagemin-svgo")({
// plugins: [{ removeTitle: true }, { convertPathData: false }]
// })
]
}
}
]
},
// html-loader -- 专门处理HTML中的一些属性。
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: {
attrs: ["img:src"]
}
}
]
}
]
},
// 插件(plugins)
plugins: [
// 注意css抖动需要放到js之前，否则会报错误、
// clean-webpack-plugin -- 删除上一次打包的dist目录
new CleanWebpackPlugin(),
// purifycss-webpack -- css tree shaking插件
new PurifyCSSPlugin({
// paths -- 需要匹配对比的文件(html、js)
paths: glob.sync([
path.join(__dirname, "./*.html"),
path.join(__dirname, "./src/entry/index.js"),
path.join(__dirname, "./src/entry/pageA.js"),
path.join(__dirname, "./src/entry/pageB.js")
])
}),
// mini-css-extract-plugin -- 单独抽离css文件的插件。
// new MiniCssExtractPlugin({ filename: "[name] - [hash:5].css" }),
// new MiniCssExtractPlugin({
// // 选项类似于webpackOptions.output中的相同选项
// // 所有选项都是可选的
// filename: '[name].css',
// chunkFilename: '[id].css',
// ignoreOrder: false, // 启用删除关于冲突顺序的警告
// }),
// js深度tree shaking 插件
new webpackDeepScopeAnalysisPlugin(),
// // html-webpack-plugin -- HTML插件，可以抽离出HTML文件
new HtmlWebpackPlugin({
// 默认 -- 生成的index.html文件名
filename: "index.html",
// 模板
template: "./index.html",
// 修改html标题
title: "myApp",
// minify -- 配置压缩
minify: {
// removeComments -- 是否清理注释
removeComments: true,
// collapseWhitespace -- 是否清理空格/换行
collapseWhitespace: true
}
}),
// // webpack.HotModuleReplacementPlugin -- 引入内置热更新插件
// new webpack.HotModuleReplacementPlugin()
],
// 开启服务器监听、命令：webpack-dev-server --open --color
devServer: {
// 配置端口号
port: "9091",
// 默认打开的路径
contentBase: "dist",
// 开启热更新 依赖：new webpack.HotModuleReplacementPlugin()
// 仅支持css行间样式(style-loader)，不支持单独抽离css、
// 正常情况下也不支持js文件热更新。可以在主入口中写入 if(module.hot)module.hot.accept(); 使其支持热更新。
hot: true
}
};
```
- 前端工具库
- HTML
- CSS
- 实用样式
- JavaScript
- 模拟运动
- 深入数组扩展
- JavaScript_补充
- jQuery
- 自定义插件
- 网络 · 后端请求
- css3.0 - 2019-2-28
- 选择器
- 边界样式
- text 字体系列
- 盒子模型
- 动图效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 画布
- SVG - 矢量图
- 多媒体类
- H5 - 其他
- webpack - 自动化构建
- webpack - 起步
- webpack -- 环境配置
- gulp
- ES6 - 2019-4-21
- HTML5补充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 页面配置
- 组件生命周期
- 自定义组件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定义功能 - 2019-7-20
- 自定义组件 - 2019-7-22
- 脚手架的使用 - 2019-7-25
- vue - 终端常用命令
- Vue Router - 路由 (基础)
- Vue Router - 路由 (高级)
- 路由插件配置 - 2019-7-29
- 路由 - 一个实例
- VUEX_数据仓库 - 2019-8-2
- Vue CLI 项目配置 - 2019-8-5
- 单元测试 - 2019-8-6
- 挂载全局组件 - 2019-11-14
- React框架
- React基本使用
- React - 组件化 2019-8-25
- React - 组件间交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props属性校验 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能优化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模块收纳
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基础 2020-3-6
- TypeScript - 进阶 2020-3-9
- Ordinary小助手
- uni-app
- 高德地图api
- mysql
- EVENTS
- 笔记