帶你從零開(kāi)始使用Webpack構(gòu)建 Vue 項(xiàng)目

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/...................無(wú)需編譯的靜態(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 插件來(lái)壓縮 CSS

webpack 官方建議我們放在optimization 里，當(dāng) optimization開(kāi)啟時(shí)，才壓縮。

因?yàn)槲覀冊(cè)?optimization 使用數(shù)組配置了 optimize-css-assets-webpack-plugin 插件，webpack 認(rèn)為我們需要自定義配置，所以導(dǎo)致 JS 壓縮失效，相對(duì)的我們需要使用 terser-webpack-plugin 插件來(lái)壓縮 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',
    }),
  ],
};

將無(wú)需編譯的文件復(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

配置

這里我開(kāi)啟了模塊熱替換，對(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)聽(tīng)請(qǐng)求的端口號(hào)
    port: '8000',
    // local服務(wù)器自動(dòng)打開(kāi)瀏覽器。
    open: true,
    // 當(dāng)出現(xiàn)編譯器錯(cuò)誤或警告時(shí)，在瀏覽器中顯示全屏遮罩層。默認(rèn)情況下禁用。
    overlay: false,
    // 瀏覽器中訪問(wèn)的相對(duì)路徑
    publicPath: '',
    // 代理配置
    proxy: {
      '/api/': {
        target: 'https://github.com/',
        changeOrigin: true,
        logLevel: 'debug',
      },
    },
    // 除了初始啟動(dòng)信息之外的任何內(nèi)容都不會(huì)被打印到控制臺(tái)。這也意味著來(lái)自 webpack 的錯(cuò)誤或警告在控制臺(tái)不可見(jiàn)。
    // 我們配置 FriendlyErrorsPlugin 來(lái)顯示錯(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ì)生成用于開(kāi)發(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)聽(tīng)請(qǐng)求的端口號(hào)
    port: '8000',
    // local服務(wù)器自動(dòng)打開(kāi)瀏覽器。
    open: true,
    // 當(dāng)出現(xiàn)編譯器錯(cuò)誤或警告時(shí)，在瀏覽器中顯示全屏遮罩層。默認(rèn)情況下禁用。
    overlay: false,
    // 瀏覽器中訪問(wèn)的相對(duì)路徑
    publicPath: '',
    // 代理配置
    proxy: {
      '/api/': {
        target: 'https://github.com/',
        changeOrigin: true,
        logLevel: 'debug',
      },
    },
    // 除了初始啟動(dòng)信息之外的任何內(nèi)容都不會(huì)被打印到控制臺(tái)。這也意味著來(lái)自 webpack 的錯(cuò)誤或警告在控制臺(tái)不可見(jiàn)。
    // 我們配置 FriendlyErrorsPlugin 來(lái)顯示錯(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)境多配置文件

開(kāi)發(fā)環(huán)境(development)和生產(chǎn)環(huán)境(production)的構(gòu)建目標(biāo)差異很大。在開(kāi)發(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)境編寫(xiě)彼此獨(dú)立的 webpack 配置。

因?yàn)樯a(chǎn)環(huán)境和開(kāi)發(fā)環(huán)境的配置只有略微區(qū)別，所以將共用部分的配置作為一個(gè)通用配置。使用 webpack-merge 工具，將這些配置合并在一起。通過(guò)通用配置，我們不必在不同環(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)聽(tīng)請(qǐng)求的端口號(hào)
    port: '8000',
    // local服務(wù)器自動(dòng)打開(kāi)瀏覽器。
    open: true,
    // 當(dāng)出現(xiàn)編譯器錯(cuò)誤或警告時(shí)，在瀏覽器中顯示全屏遮罩層。默認(rèn)情況下禁用。
    overlay: false,
    // 瀏覽器中訪問(wèn)的相對(duì)路徑
    publicPath: '',
    // 代理配置
    proxy: {
      '/api/': {
        target: 'https://github.com/',
        changeOrigin: true,
        logLevel: 'debug',
      },
    },
    // 除了初始啟動(dòng)信息之外的任何內(nèi)容都不會(huì)被打印到控制臺(tái)。這也意味著來(lái)自 webpack 的錯(cuò)誤或警告在控制臺(tái)不可見(jiàn)。
    // 我們配置 FriendlyErrorsPlugin 來(lái)顯示錯(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)一開(kāi)發(fā)者的編碼風(fēng)格
  • ESLint 可以幫助開(kāi)發(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ù)格式問(wèn)題

npm run lint

配置文件傳送門(mén)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容