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(待更新)