> ## :-: 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
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request