webpack 4.0 小記
介紹
其實以前也會看一些 webpack 腳手架的配置，可是使用的插件實在是太多了，不瞭解各個插件的左右是一個很大的瓶頸，因此着手認識認識各大插件。css
項目地址，以前一直都是用腳手架工具，最近得閒就學習了花褲衩大佬的手摸手系列，本身按着實現一下，順便記錄一下知識點。html
項目使用 yarn,以前用主要使用 cnpm，可是老是會有些漏包的問題，因此以後改用了 yarn，我的確實以爲 yarn 在國內來講更友好。vue
項目結構
開始
- 項目初始化
yarn init / npm init // 建立 package.json
複製代碼
- 建立文件夾
build // 存儲打包相關文件
config // 配置變量
src // 項目資源文件
static // 靜態文件
複製代碼
webpack 相關插件介紹
其餘的具體配置看源碼就行了，我在這裏主要介紹一下相關的幾個插件(基於 webpack 4.0)node
webpack-cli | webpack | webpack-dev-server | webpack-merge
webpack 4.0 須要安裝 webpack-cliwebpack
yarn add --dev webpack-cli webpack webpack-dev-server webpack-merge
複製代碼
webpack-cli // webpack 腳手架，包含了不少內置方法(例如：--compress， --color)
webpack-dev-server // 配置開發環境服務
webpack-merge // 用於合併 webpack 公共配置，縮減代碼量，使代碼更清晰
複製代碼
webpack-dev-server
devServer:{
contentBase: false,
//我這裏沒有設置contentBase，我的研究contentBase必須指向存在的bundle.js文件所在目錄，
//由於這裏是開發模式，因此dist目錄並不存在，因此用false.
host:' localhost',
port: '8888',
inline:true,//webpack官方推薦
watchOptions: {
aggregateTimeout: 2000,//瀏覽器延遲多少秒更新
poll: 1000//每秒檢查一次變更
},
compress: true,//一切服務都啓用gzip 壓縮
historyApiFallback: true,//找不到頁面默認跳index.html
hot: true,//啓動熱更新，必須搭配new webpack.HotModuleReplacementPlugin()插件
open: true,
}
複製代碼
webpack-dev-server 其餘配置項以及在 package.json 中的快捷實用git
webpack(?.base).js 中使用
devServer 還有如下屬性es6
// 在全部響應中添加首部內容
headers: {
"X-Custom-Foo": "bar"
}
複製代碼
// 默認狀況下，dev-server 經過 HTTP 提供服務。也能夠選擇帶有 HTTPS 的 HTTP/2 提供服務
https: true
// 以上設置使用了自簽名證書，可是你能夠提供本身的：https: {
key: fs.readFileSync("/path/to/server.key"),
cert: fs.readFileSync("/path/to/server.crt"),
ca: fs.readFileSync("/path/to/ca.pem")
}
複製代碼
// 當存在編譯器錯誤或警告時，在瀏覽器中顯示全屏覆蓋。默認狀況下禁用。若是隻想顯示編譯器錯誤：
overlay: true
// 若是您想顯示警告和錯誤：
overlay: {
warnings: true,
errors: true
}
複製代碼
若是你不想始終傳遞 /api，則須要重寫路徑：proxy: {
"/api": {
target: "http://localhost:3000",
pathRewrite: {"^/api" : ""}
}}
複製代碼
package.json 中使用如下都是 webpack-dev-server --xxxx 模式
--allowed-hosts // host 白名單github
--color // CLI only 控制檯信息顏色web
--compress // CLI only 一切服務都啓用gzip 壓縮npm
--inline // 默認爲 true， false 爲 iframe 模式。 在 dev-server 的兩種不一樣模式之間切換。默認狀況下，應用程序啓用內聯模式(inline mode)。這意味着一段處理實時重載的腳本被插入到你的包(bundle)中，而且構建消息將會出如今瀏覽器控制檯。也可使用iframe 模式，它在通知欄下面使用標籤，包含了關於構建的消息。切換到iframe 模式：
--open // 自動打開瀏覽器 --open 'Google Chrome': 自動打開谷歌瀏覽器
--openPage // 自動打開的頁面路徑 如 webpack-dev-server --open-page "/different/page"
--progress // 將運行進度輸出到控制檯
webpack-html-plugin
yarn add --dev html-webpack-plugin@next
複製代碼
// webpack.xxx.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
... ...
// plugin中須要引入配置
new HtmlWebpackPlugin({
template: 'index.html',
filename: 'index.html',
inject: true,
favicon: resolve('favicon.ico'),
title: 'webpack demo',
minify: { // 壓縮 HTML 的配置
minifyCSS: true, // 壓縮 HTML 中出現的 CSS 代碼
minifyJS: true, // 壓縮 HTML 中出現的 JS 代碼
removeComments: true, // 移除註釋
collapseWhitespace: true, // 縮去空格
removeAttributeQuotes: true // 移除屬性引號
}
})
複製代碼
index.html 中使用 plugin 配置的變量
// index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
複製代碼
copy-webpack-plugin
做用：在webpack中拷貝文件和文件夾, 打包的時候須要配置使用
// webpack.prod.js
const CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: path.resolve(__dirname, '../dist/static'),
ignore: ['.*']
}
])
]
複製代碼
mini-css-extract-plugin 配置
此插件將CSS提取到單獨的文件中。它爲每一個包含CSS的JS文件建立一個CSS文件。它支持CSS和SourceMaps的按需加載。它創建在新的webpack v4功能（模塊類型）之上，而且須要webpack 4才能工做。
yarn add --dev mini-css-extract-plugin
複製代碼
// 生產環境壓縮須要使用 optimize-css-assets-webpack-plugin 配合使用
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
複製代碼
babel-loader
webpack 配置 babel 須要安裝 babel-core、babel-preset-env、babel-loader、 babel-plugin-transform-runtime
babel-core：是babel的核心編譯器
babel-preset-env： 是一個配置文件，能夠根據此配置文件讓目標瀏覽器或者運行環境來自動將ES2015+的代碼轉換爲es5，得以向下兼容
babel-loader： webpack 插件，預處理文件
babel-plugin-transform-runtime： 禁用了 babel 自動對每一個文件的 runtime 注入，而是引入 babel-plugin-transform-runtime 而且使全部輔助代碼從這裏引用。
yarn add --dev babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime
複製代碼
babel-loader^8.0.0 安裝的 babel-core 以及 babel-preset-env 和之前不一樣， 具體使用詳見 babel-loader，
以上插件須要用如下的替換
"@babel/core": "^7.4.5",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/runtime": "^7.4.5",
複製代碼
// webpack.config.js
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']，
plugins: ['@babel/transform-runtime']
}
}
}
]}
複製代碼
在 .babelrc 中添加插件
// .babelrc
{
"plugins": ["@babel/plugin-transform-runtime"]
}
複製代碼
eslint
eslint 主要用於檢查語法錯誤，配合 prettier，vscode 配置插件，能夠統一代碼風格 須要安裝 eslint、eslint-loader、babel-eslint、eslint-config-standard、eslint-friendly-formatter
yarn add --dev eslint eslint-loader babel-eslint eslint-config-standard eslint-friendly-formatter
複製代碼
babel-eslint： 解析器 eslint-config-standard： 官方推薦標準配置 eslint-friendly-formatter： 使 eslint 報錯的更友好 eslint-plugin-vue： vue相關配置
這裏使 eslint-config-standard，還須要安裝一下插件
yarn add --dev eslint-plugin-html eslint-plugin-import eslint-plugin-node eslint-plugin-promise
複製代碼
// .eslintrc.js
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true
},
extends: "eslint: standard", // 引用 擴展規則
rules: {
"indent": ["error", 2],
"quotes": ["error", "double"],
"semi": ["error", "always"],
"no-console": "error",
"arrow-parens": 0
}
}
複製代碼
《未完待續...》
- 1. webpack升級4.0
- 2. webpack 3.1 升級webpack 4.0
- 3. Webpack 4.0 學習（轉）
- 4. webpack小記
- 5. webpack 4.0 中 clean-webpack-plugin 的使用
- 6. 瞭解webpack-4.0版本（一）
- 7. Webpack 4.0 CommonsChunkPlugin 和 optimization splitChunks
- 8. webpack使用小記
- 9. webpack分享小記
- 10. webpack-4.0更新日誌（翻譯）
- 更多相關文章...
- • ADO Recordset（記錄集） - ADO 教程
- • ASP.NET Razor - 標記 - ASP.NET 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 使用Rxjava計算圓周率
-
每一个你不满意的现在，都有一个你没有努力的曾经。