webpack429x成神之路二十三-手动配置vuecli下

目录

上节：手动配置 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(待更新)