Study Notes
本博主會(huì)持續(xù)更新各種前端的技術(shù)玄帕，如果各位道友喜歡稚晚，可以關(guān)注绎巨、收藏做祝、點(diǎn)贊下本博主的文章砾省。
Webpack 構(gòu)建 Vue 項(xiàng)目
項(xiàng)目目錄結(jié)構(gòu)
└───vue/..........................項(xiàng)目目錄
├───src/......................src目錄
│ └───assets/...............資源目錄
│ └───components/...........組件目錄
│ └───App.vue
│ └───main.js
└───public/...................無需編譯的靜態(tài)資源目錄
│ └───index.html
└───.eslintrc.js..............eslint配置文件
└───babel.config.js...........babel配置文件
└───package.json..............模塊包配置文件
└───webpack.common.js.........webpack配置文件(公共部分)
└───webpack.dev.js............webpack配置文件(測(cè)試環(huán)境部分)
└───webpack.prod.js...........webpack配置文件(生產(chǎn)環(huán)境部分)
└───webpack.config.js.........webpack配置文件(未拆分)
安裝 webpack 和 webpack-cli
npm i webpack webpack-cli -D
配置入口起點(diǎn)
創(chuàng)建一個(gè)webpack.config.js文件
module.exports = {
entry: './src/main.js',
};
配置 output
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist'),
},
};
配置 mode
提供 mode 配置選項(xiàng)，告知 webpack 使用相應(yīng)模式的內(nèi)置優(yōu)化混槐。
| 選項(xiàng) | 描述 |
|---|---|
| development | 會(huì)將 process.env.NODE_ENV 的值設(shè)為 development编兄。啟用 NamedChunksPlugin 和 NamedModulesPlugin。 |
| production | 會(huì)將 process.env.NODE_ENV 的值設(shè)為 production声登。啟用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin. |
| none | 會(huì)將 process.env.NODE_ENV 的值設(shè)為 none狠鸳，不做任何處理 |
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist'),
},
mode: 'production',
};
樣式文件處理
安裝
npm i style-loader less less-loader css-loader -D
- 將 less 轉(zhuǎn)換為 css
- 解析 CSS 文件后，使用 import 加載悯嗓，并且返回 CSS 代碼
- 將模塊的導(dǎo)出作為樣式添加到 DOM 中
配置
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist'),
},
mode: 'production',
module: {
rules: [
{
test: /\.(less|css)$/,
use: ['style-loader', 'css-loader', 'less-loader'],
},
],
},
};
CSS 提取
安裝
npm i mini-css-extract-plugin optimize-css-assets-webpack-plugin terser-webpack-plugin -D
配置
因?yàn)?webpack 的 production 只會(huì)壓縮 JS 代碼件舵，所以我們這邊需要自己配置 optimize-css-assets-webpack-plugin 插件來壓縮 CSS
webpack 官方建議我們放在optimization 里，當(dāng) optimization開啟時(shí)脯厨，才壓縮铅祸。
因?yàn)槲覀冊(cè)?optimization 使用數(shù)組配置了 optimize-css-assets-webpack-plugin 插件，webpack 認(rèn)為我們需要自定義配置合武，所以導(dǎo)致 JS 壓縮失效个少，相對(duì)的我們需要使用 terser-webpack-plugin 插件來壓縮 JS 代碼
webpack.config.js
const path = require('path');
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist'),
},
mode: 'production',
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
module: {
rules: [
{
test: /\.(less|css)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
};
處理文件資源
安裝
npm i url-loader file-loader -D
配置
當(dāng)文件資源大于 10000byte 時(shí)，生成文件到指定目錄
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist'),
},
mode: 'production',
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 10000,
esModule: false,
name: 'imgs/[name].[hash:4].[ext]',
},
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name].[hash:4].[ext]',
},
},
{
test: /.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[hash:4].[ext]',
},
},
],
},
};
處理 vue 文件
安裝
npm i vue-loader vue-template-compiler -D
配置
指定加載src目錄下的眯杏，忽略node_modules目錄
webpack.config.js
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist'),
},
mode: 'production',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
},
],
},
plugins: [
new VueLoaderPlugin(), // vue loader 15 必須添加plugin
],
};
處理 js 文件
將 es6+ 轉(zhuǎn)換為 es5
安裝
npm i babel-loader @babel/core @babel/preset-env -D
配置
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist'),
},
mode: 'production',
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
},
],
},
};
配置 babel 使用插件集合將 es6+ 轉(zhuǎn)換為 es5
babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env',
{
modules: false,
targets: {
browsers: ['> 1%', 'last 2 versions', 'not ie <= 8'],
},
},
],
],
};
HTML 文件的創(chuàng)建
安裝
npm i html-webpack-plugin -D
配置
使用模板創(chuàng)建html夜焦，并注入BASE_URL、title
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= htmlWebpackPlugin.options.BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist'),
},
mode: 'production',
plugins: [
new HtmlWebpackPlugin({
BASE_URL: 'public/',
title: 'test webpack',
inject: true,
template: 'public/index.html',
}),
],
};
將無需編譯的文件復(fù)制到打包目錄下
安裝
npm i copy-webpack-plugin -D
配置
babel.config.js
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist'),
},
mode: 'production',
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, 'public'),
to: 'public',
},
],
}),
],
};
刪除構(gòu)建文件夾岂贩。
安裝
npm i clean-webpack-plugin -D
配置
babel.config.js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist'),
},
mode: 'production',
plugins: [new CleanWebpackPlugin()],
};
瀏覽器同步測(cè)試工具
安裝
npm i webpack-dev-server -D
配置
這里我開啟了模塊熱替換茫经，對(duì)于樣式更改，不會(huì)進(jìn)行瀏覽器刷新
babel.config.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist'),
},
mode: 'production',
devServer: {
// 當(dāng)使用內(nèi)聯(lián)模式(inline mode)時(shí)萎津，控制臺(tái)(console)將顯示消息卸伞，可能的值有 none, error, warning 或者 info（默認(rèn)值）。
clientLogLevel: 'none',
//當(dāng)使用 HTML5 History API 時(shí)锉屈，任意的 404 響應(yīng)都可能需要被替代為 index.html
historyApiFallback: {
index: `index.html`,
},
// 啟用 webpack 的模塊熱替換特性
hot: true,
// 告訴服務(wù)器從哪里提供內(nèi)容荤傲。只有在你想要提供靜態(tài)文件時(shí)才需要。我們這里直接禁用掉
contentBase: false,
// 一切服務(wù)都啟用gzip 壓縮：
compress: true,
// 指定使用一個(gè) host颈渊。默認(rèn)是 localhost
host: 'localhost',
// 指定要監(jiān)聽請(qǐng)求的端口號(hào)
port: '8000',
// local服務(wù)器自動(dòng)打開瀏覽器遂黍。
open: true,
// 當(dāng)出現(xiàn)編譯器錯(cuò)誤或警告時(shí)终佛，在瀏覽器中顯示全屏遮罩層。默認(rèn)情況下禁用雾家。
overlay: false,
// 瀏覽器中訪問的相對(duì)路徑
publicPath: '',
// 代理配置
proxy: {
'/api/': {
target: 'https://github.com/',
changeOrigin: true,
logLevel: 'debug',
},
},
// 除了初始啟動(dòng)信息之外的任何內(nèi)容都不會(huì)被打印到控制臺(tái)铃彰。這也意味著來自 webpack 的錯(cuò)誤或警告在控制臺(tái)不可見。
// 我們配置 FriendlyErrorsPlugin 來顯示錯(cuò)誤信息到控制臺(tái)
quiet: true,
// webpack 使用文件系統(tǒng)(file system)獲取文件改動(dòng)的通知芯咧。監(jiān)視文件 https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
watchOptions: {
poll: false,
},
disableHostCheck: true,
},
};
Devtool
具體配置請(qǐng)移步到Devtool筆記
配置
這里我們使用eval-source-map
每個(gè)模塊使用 eval() 執(zhí)行牙捉，并且 source map 轉(zhuǎn)換為 DataUrl 后添加到 eval() 中。初始化 source map 時(shí)比較慢敬飒，但是會(huì)在重新構(gòu)建時(shí)提供比較快的速度邪铲，并且生成實(shí)際的文件。行數(shù)能夠正確映射无拗，因?yàn)闀?huì)映射到原始代碼中霜浴。它會(huì)生成用于開發(fā)環(huán)境的最佳品質(zhì)的 source map。
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist'),
},
mode: 'production',
devtool: 'eval-source-map',
};
webpack.config.js和babel.config.js完整示例
webpack.config.js
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-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 = {
entry: './src/main.js',
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist'),
},
mode: 'production',
devtool: 'eval-source-map',
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
devServer: {
// 當(dāng)使用內(nèi)聯(lián)模式(inline mode)時(shí)蓝纲，控制臺(tái)(console)將顯示消息阴孟，可能的值有 none, error, warning 或者 info（默認(rèn)值）。
clientLogLevel: 'none',
//當(dāng)使用 HTML5 History API 時(shí)税迷，任意的 404 響應(yīng)都可能需要被替代為 index.html
historyApiFallback: {
index: `index.html`,
},
// 啟用 webpack 的模塊熱替換特性
hot: true,
// 告訴服務(wù)器從哪里提供內(nèi)容永丝。只有在你想要提供靜態(tài)文件時(shí)才需要。我們這里直接禁用掉
contentBase: false,
// 一切服務(wù)都啟用gzip 壓縮：
compress: true,
// 指定使用一個(gè) host箭养。默認(rèn)是 localhost
host: 'localhost',
// 指定要監(jiān)聽請(qǐng)求的端口號(hào)
port: '8000',
// local服務(wù)器自動(dòng)打開瀏覽器慕嚷。
open: true,
// 當(dāng)出現(xiàn)編譯器錯(cuò)誤或警告時(shí)，在瀏覽器中顯示全屏遮罩層毕泌。默認(rèn)情況下禁用喝检。
overlay: false,
// 瀏覽器中訪問的相對(duì)路徑
publicPath: '',
// 代理配置
proxy: {
'/api/': {
target: 'https://github.com/',
changeOrigin: true,
logLevel: 'debug',
},
},
// 除了初始啟動(dòng)信息之外的任何內(nèi)容都不會(huì)被打印到控制臺(tái)。這也意味著來自 webpack 的錯(cuò)誤或警告在控制臺(tái)不可見撼泛。
// 我們配置 FriendlyErrorsPlugin 來顯示錯(cuò)誤信息到控制臺(tái)
quiet: true,
// webpack 使用文件系統(tǒng)(file system)獲取文件改動(dòng)的通知挠说。監(jiān)視文件 https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
watchOptions: {
poll: false,
},
disableHostCheck: true,
},
module: {
rules: [
{
test: /\.(less|css)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
},
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 10000,
esModule: false,
name: 'imgs/[name].[hash:4].[ext]',
},
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name].[hash:4].[ext]',
},
},
{
test: /.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[hash:4].[ext]',
},
},
{
test: /\.vue$/,
loader: 'vue-loader',
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
},
{
test: /\.js$/,
loader: 'babel-loader',
},
],
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
new HtmlWebpackPlugin({
BASE_URL: 'public/',
inject: true,
template: 'public/index.html',
}),
new VueLoaderPlugin(), // vue loader 15 必須添加plugin
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, 'public'),
to: 'public',
},
],
}),
],
};
babel.config.js
module.exports = {
presets: [
[
'@babel/env',
{
modules: false,
targets: {
browsers: ['> 1%', 'last 2 versions', 'not ie <= 8'],
},
},
],
],
};
Webpack 多環(huán)境多配置文件
開發(fā)環(huán)境(development)和生產(chǎn)環(huán)境(production)的構(gòu)建目標(biāo)差異很大。在開發(fā)環(huán)境中愿题，我們需要具有強(qiáng)大的损俭、具有實(shí)時(shí)重新加載(live reloading)或熱模塊替換(hot module replacement)能力的 source map 和 localhost server。而在生產(chǎn)環(huán)境中潘酗，我們的目標(biāo)則轉(zhuǎn)向于關(guān)注更小的 bundle杆兵，更輕量的 source map，以及更優(yōu)化的資源仔夺，以改善加載時(shí)間琐脏。建議為每個(gè)環(huán)境編寫彼此獨(dú)立的 webpack 配置。
因?yàn)樯a(chǎn)環(huán)境和開發(fā)環(huán)境的配置只有略微區(qū)別，所以將共用部分的配置作為一個(gè)通用配置日裙。使用 webpack-merge 工具吹艇，將這些配置合并在一起。通過通用配置阅签，我們不必在不同環(huán)境的配置中重復(fù)代碼掐暮。
webpack.common.js
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist'),
},
mode: 'development',
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 10000,
esModule: false,
name: 'imgs/[name].[hash:4].[ext]',
},
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name].[hash:4].[ext]',
},
},
{
test: /.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[hash:4].[ext]',
},
},
{
test: /\.vue$/,
loader: 'vue-loader',
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
},
{
test: /\.js$/,
loader: 'babel-loader',
},
],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
BASE_URL: 'public/',
inject: true,
template: 'public/index.html',
}),
new VueLoaderPlugin(), // vue loader 15 必須添加plugin
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, 'public'),
to: 'public',
},
],
}),
],
};
webpack.dev.js
const path = require('path');
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common');
module.exports = merge(commonConfig, {
entry: './src/main.js',
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist'),
},
mode: 'development',
devtool: 'eval-source-map',
devServer: {
// 當(dāng)使用內(nèi)聯(lián)模式(inline mode)時(shí)蝎抽，控制臺(tái)(console)將顯示消息政钟，可能的值有 none, error, warning 或者 info（默認(rèn)值）。
clientLogLevel: 'none',
//當(dāng)使用 HTML5 History API 時(shí)樟结，任意的 404 響應(yīng)都可能需要被替代為 index.html
historyApiFallback: {
index: `index.html`,
},
// 啟用 webpack 的模塊熱替換特性
hot: true,
// 告訴服務(wù)器從哪里提供內(nèi)容养交。只有在你想要提供靜態(tài)文件時(shí)才需要。我們這里直接禁用掉
contentBase: false,
// 一切服務(wù)都啟用gzip 壓縮：
compress: true,
// 指定使用一個(gè) host瓢宦。默認(rèn)是 localhost
host: 'localhost',
// 指定要監(jiān)聽請(qǐng)求的端口號(hào)
port: '8000',
// local服務(wù)器自動(dòng)打開瀏覽器碎连。
open: true,
// 當(dāng)出現(xiàn)編譯器錯(cuò)誤或警告時(shí)，在瀏覽器中顯示全屏遮罩層驮履。默認(rèn)情況下禁用鱼辙。
overlay: false,
// 瀏覽器中訪問的相對(duì)路徑
publicPath: '',
// 代理配置
proxy: {
'/api/': {
target: 'https://github.com/',
changeOrigin: true,
logLevel: 'debug',
},
},
// 除了初始啟動(dòng)信息之外的任何內(nèi)容都不會(huì)被打印到控制臺(tái)。這也意味著來自 webpack 的錯(cuò)誤或警告在控制臺(tái)不可見玫镐。
// 我們配置 FriendlyErrorsPlugin 來顯示錯(cuò)誤信息到控制臺(tái)
quiet: true,
// webpack 使用文件系統(tǒng)(file system)獲取文件改動(dòng)的通知倒戏。監(jiān)視文件 https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
watchOptions: {
poll: false,
},
disableHostCheck: true,
},
module: {
rules: [
{
test: /\.(less|css)$/,
use: ['style-loader', 'css-loader', 'less-loader'],
},
],
},
});
webpack.prod.js
const path = require('path');
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common');
module.exports = merge(commonConfig, {
entry: './src/main.js',
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist'),
},
mode: 'production',
devtool: 'none',
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
module: {
rules: [
{
test: /\.(less|css)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
});
配置scripts
package.json
{
"scripts": {
"serve": "webpack-dev-server --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
}
}
ESLint
- 最為主流的 JavaScript Lint 工具 監(jiān)測(cè) JS 代碼質(zhì)量
- ESLint 很容易統(tǒng)一開發(fā)者的編碼風(fēng)格
- ESLint 可以幫助開發(fā)者提升編碼能力
安裝
npm i eslint eslint-loader babel-eslint eslint-plugin-vue eslint-plugin-vue-libs -D
初始化 eslint 配置
在初始化 eslint 的時(shí)候選擇 Vue
eslint --init
配置
webpack.prod.js
const path = require('path');
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common');
module.exports = merge(commonConfig, {
entry: './src/main.js',
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist'),
},
mode: 'production',
devtool: 'none',
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
module: {
rules: [
{
test: /\.(less|css)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
},
{
test: /\.(js|vue)$/,
use: { loader: 'eslint-loader' },
enforce: 'pre',
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
});
package.json
{
"scripts": {
"lint": "eslint --ext .vue,.js src --fix"
}
}
使用
我在webpack.prod.js配置了 eslint 校驗(yàn)，所以每次 build 的時(shí)候都會(huì)進(jìn)行 eslint 校驗(yàn)
npm run build
package.json配置了自動(dòng)修復(fù)格式問題
npm run lint
