webpack4.29.x成神之路（二十三） 手動配置vue-cli下

目錄

上節： 手動配置vue-cli上

上節目錄：

生成環境配置需求

• 每次內容變化，輸出的文件名hash也會變化
• 每次打包清理dist目錄
• 代碼分割（分割第三方庫）
• css分割

如下都是修改build/webpack.prod.js

配置輸出文件名

// 省略
output: {
    filename: 'js/[name].[contenthash:10].js'
  },
// 省略

清理輸出目錄(dist)

安裝插件：npm i clean-webpack-plugin -D

// 省略
const CleanWebpackPlugin = require('clean-webpack-plugin');
output: {
    filename: 'js/[name].[contenthash:10].js'
  },

plugins: [
    new HTMLPlugin({
      template: './index.html'
    }),

    // 將定義過的其它規則複製並應用到 .vue 文件裏相應語言的塊
    new VueLoaderPlugin(),

    new CleanWebpackPlugin()
  ]
// 省略

代碼分割

配置optimization屬性：

// 省略
 optimization: {
    // 配置代碼分割
    splitChunks: {
      // 要分割哪些模塊：all（推薦）, async(默認，只分隔異步代碼), and initial
      chunks: 'all'
    }
  }
// 省略

css分割

安裝插件：npm i mini-css-extract-plugin -D

// 省略
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module: {
    rules: [{
      // 識別.vue文件
      test: /\.vue$/,
      loader: 'vue-loader',
    }, {
      // 用於識別vue文件中的script塊
      test: /\.js$/,
      loader: 'babel-loader',
    }, {
      // 用於識別vue文件中的style塊
      test: /\.(css|less)$/,

      /* 
        MiniCssExtractPlugin.loader代替vue-style-loader
      */
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
    }, {
      test: /\.(gif|jpg|jpeg|png|svg|ttf|woff)$/,
      loader: 'url-loader'
    }]
  },
plugins: [
    new HTMLPlugin({
      template: './index.html'
    }),

    // 將定義過的其它規則複製並應用到 .vue 文件裏相應語言的塊
    new VueLoaderPlugin(),

    new CleanWebpackPlugin(),
    // ... 忽略 vue-loader 插件
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:10].css'
    })
  ],
// 省略

如今build/webpack.prod.js所有內容應該以下：
注意修改mode選項

const HTMLPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  mode: 'production',
  entry: './src/main.js',
  output: {
    filename: 'js/[name].[contenthash:10].js'
  },

  
  module: {
    rules: [{
      // 識別.vue文件
      test: /\.vue$/,
      loader: 'vue-loader',
    }, {
      // 用於識別vue文件中的script塊
      test: /\.js$/,
      loader: 'babel-loader',
    }, {
      // 用於識別vue文件中的style塊
      test: /\.(css|less)$/,

      /* 
        MiniCssExtractPlugin.loader代替vue-style-loader
      */
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
    }, {
      test: /\.(gif|jpg|jpeg|png|svg|ttf|woff)$/,
      loader: 'url-loader'
    }]
  },
  plugins: [
    new HTMLPlugin({
      template: './index.html'
    }),

    // 將定義過的其它規則複製並應用到 .vue 文件裏相應語言的塊
    new VueLoaderPlugin(),

    new CleanWebpackPlugin(),
    // ... 忽略 vue-loader 插件
    new MiniCssExtractPlugin({
      filename: 'styles/[name].[contenthash:10].css'
    })
  ],
  optimization: {
    // 配置代碼分割
    splitChunks: {
      // 要分割哪些模塊：all（推薦）, async(默認，只分隔異步代碼), and initial
      chunks: 'all'
    }
  }
};

而後修改package.json的scripts屬性：

// 省略
"scripts": {
    "dev": "webpack-dev-server --config build/webpack.dev.js",
    "build": "webpack --config build/webpack.prod.js"
  },
// 省略

而後npm run build，看可否正確打包：

這樣生成環境的配置就差很少樂。

抽離公共配置

生成和開發環境的配置項與許多重複的，咱們要把這些重複的項寫到webpack.base.js裏去。

build/webpack.base.js:

const HTMLPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const {resolve} = require('path');
module.exports = {
  entry: resolve(__dirname, '../src/main.js'),
  module: {
    rules: [{
      // 識別.vue文件
      test: /\.vue$/,
      loader: 'vue-loader',
    }, {
      // 用於識別vue文件中的script塊
      test: /\.js$/,
      loader: 'babel-loader',
    }, {
      test: /\.(gif|jpg|jpeg|png|svg|ttf|woff)$/,
      loader: 'url-loader'
    }]
  },
  plugins: [
    new HTMLPlugin({
      template: resolve(__dirname, '../index.html')
    }),

    // 將定義過的其它規則複製並應用到 .vue 文件裏相應語言的塊
    new VueLoaderPlugin()
  ]
};

build/webpack.dev.js:

const webpack = require('webpack');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');
module.exports = merge(baseConfig, {
  mode: 'development',
  
  // 起node服務
  devServer: {
    port: 4200,
    hot: true
  },
  
  module: {
    rules: [{
      // 用於識別vue文件中的style塊
      test: /\.(css|less)$/,

      /* 
        vue-style-loader基於style-loader
        https://www.npmjs.com/package/vue-style-loader
      */
      use: ['vue-style-loader', 'css-loader', 'less-loader']
    }]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
});

build/webpack.prod.js:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');
module.exports = merge(baseConfig, {
  mode: 'production',
  output: {
    filename: 'js/[name].[contenthash:10].js'
  },

  
  module: {
    rules: [{
      // 用於識別vue文件中的style塊
      test: /\.(css|less)$/,
      /* 
        MiniCssExtractPlugin.loader代替vue-style-loader
      */
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
    }]
  },
  plugins: [
    new CleanWebpackPlugin(),

    // ... 忽略 vue-loader 插件
    new MiniCssExtractPlugin({
      filename: 'styles/[name].[contenthash:10].css'
    })
  ],
  optimization: {
    // 配置代碼分割
    splitChunks: {
      // 要分割哪些模塊：all（推薦）, async(默認，只分隔異步代碼), and initial
      chunks: 'all'
    }
  }
});

安裝插件：npm i webpack-merge -D

而後試下npm run dev和npm run build是否正常

下節：手動配置vue-cli——集成typescript