vue-cli+webpack打包配置

龍恩0707發表於2017-12-14

vue-cli+webpack打包配置

一：目錄結構：

├── README.md
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js 
│   ├── test.env.js
│   └── prod.env.js
│  
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   │── router
│   │    └── index.js
│   └── main.js
├── static
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .postcssrc.js

二：指令分析：

2-1 先看 package.json 裡面的scripts的欄位

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "unit": "jest --config test/unit/jest.conf.js --coverage",
  "test": "npm run unit",
  "lint": "eslint --ext .js,.vue src test/unit/specs",
  "build": "node build/build.js"
}

執行 npm run dev 後，會執行開發環境打包，就會執行 build資料夾下的 webpack.dev.conf.js程式碼，執行 npm run build後，
會進行正式環境打包，執行build/build.js檔案程式碼。我們首先來看下 webpack的配置。

三：webpack配置

3-1 webpack.base.conf.js

入口檔案 entry 程式碼如下：

entry: {
  app: './src/main.js'
}

輸出檔案 output 程式碼如下：

output: {
  path: config.build.assetsRoot,  // 匯出目錄的絕對路徑 在專案的根目錄下 會新建dist資料夾
  filename: '[name].js',  // 匯出檔案的檔名
  publicPath: process.env.NODE_ENV === 'production'
    ? config.build.assetsPublicPath
    : config.dev.assetsPublicPath  
}

如上程式碼 config; 在頁面上引入程式碼： const config = require('../config'); 我們可以開啟config下的index.js檢視下程式碼就可以明白
了，如果是正式環境 publicPath = config.build.assetsPublicPath，如果是開發環境 publicPath = config.dev.assetsPublicPath；publicPath 是虛擬目錄，自動指向path編譯的目錄。比如在正式環境打包會生成

dist
  static
    css
    js
    index.html

生成如上的目錄，那麼設定 publicPath 為 './', 那麼在index.html引入的路徑就變為 ./css/xx.css, js路徑變為 ./js/xx.js
, 直接開啟index.html就可以訪問到 css 和對應的js的。
如果是開發環境，設定 publicPath為 '/'，那麼在開發環境訪問頁面; 比如 http://localhost:8080; 那麼js路徑就是
http://localhost:8080/app.js了；

檔案解析 resolve (主要設定模組如何被解析)

// 設定模組如何被解析
resolve: {
  // 自動解析確定的副檔名，匯入模組時不帶副檔名
  extensions: ['.js', '.vue', '.json'],

  // 建立import 或 require的別名
  /*
   比如如下檔案
   src
     components
       a.vue
     router
       home
         index.vue
    在index.vue裡面，正常引用A元件；如下：
    import A from '../../components/a.vue';
    如果設定了 alias後，那麼引用的地方可以如下這樣了
    import A from '@/components/a.vue';
    注意：這裡的 @ 起到了 resolve('src')路徑的作用了。
  */
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src')
  }
}

模組解析module (處理專案不同型別的模組)

module: {
  rules: [
    // 在開發環境下 對於以.js或.vue字尾結尾的檔案(在src目錄下或test目錄下的檔案)，使用eslint進行檔案語法檢測。
    ...(config.dev.useEslint ? [createLintingRule()] : []),  
    {
      test: /\.vue$/,  // vue 檔案字尾的
      loader: 'vue-loader', // 使用vue-loader處理
      options: vueLoaderConfig // options是對vue-loader做的額外選項配置 檔案配置在 ./vue-loader.conf 內可以檢視程式碼
    },
    {
      test: /\.js$/, // js檔案字尾的
      loader: 'babel-loader', // 使用babel-loader處理
      include: [resolve('src'), resolve('test')] // 包含src和test的資料夾
    },
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 處理圖片字尾
      loader: 'url-loader',  // 使用url-loader處理
      options: {
        limit: 10000,  // 圖片小於10000位元組時以base64的方式引用
        name: utils.assetsPath('img/[name].[hash:7].[ext]')  // 檔名為name.7位hash的值.副檔名
      }
    },
    {
      test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,  // 音訊檔案字尾
      loader: 'url-loader',
      options: {
        limit: 10000, // 小於10000位元組時的時候處理
        name: utils.assetsPath('media/[name].[hash:7].[ext]') // 檔名為name.7位hash的值.副檔名
      }
    },
    {
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // 字型檔案
      loader: 'url-loader',
      options: {
        limit: 10000, // 字型檔案小於10000位元組的時候處理
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]') // 檔名為name.7位hash的值.副檔名
      }
    }
  ]
}

webpack.base.conf.js程式碼如下：

'use strict';
const path = require('path');
const utils = require('./utils');
const config = require('../config');
const vueLoaderConfig = require('./vue-loader.conf');

function resolve (dir) {
  return path.join(__dirname, '..', dir);
}
/*
 對於以.js或.vue字尾結尾的檔案(在src目錄下或test目錄下的檔案)，使用eslint進行檔案語法檢測。
*/
const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
});

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot, // 匯出目錄的絕對路徑
    filename: '[name].js', // 匯出檔案的檔名
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  // 設定模組如何被解析
  resolve: {
    // 自動解析確定的副檔名，匯入模組時不帶副檔名
    extensions: ['.js', '.vue', '.json'],

    // 建立import 或 require的別名
    /*
     比如如下檔案
     src
       components
         a.vue
       router
         home
           index.vue
      在index.vue裡面，正常引用A元件；如下：
      import A from '../../components/a.vue';
      如果設定了 alias後，那麼引用的地方可以如下這樣了
      import A from '@/components/a.vue';
      注意：這裡的 @ 起到了 resolve('src')路徑的作用了。
    */
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  module: {
    rules: [
      // 在開發環境下 對於以.js或.vue字尾結尾的檔案(在src目錄下或test目錄下的檔案)，使用eslint進行檔案語法檢測。
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,  // vue 檔案字尾的
        loader: 'vue-loader', // 使用vue-loader處理
        options: vueLoaderConfig // options是對vue-loader做的額外選項配置 檔案配置在 ./vue-loader.conf 內可以檢視程式碼
      },
      {
        test: /\.js$/, // js檔案字尾的
        loader: 'babel-loader', // 使用babel-loader處理
        include: [resolve('src'), resolve('test')] // 包含src和test的資料夾
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 處理圖片字尾
        loader: 'url-loader',  // 使用url-loader處理
        options: {
          limit: 10000,  // 圖片小於10000位元組時以base64的方式引用
          name: utils.assetsPath('img/[name].[hash:7].[ext]')  // 檔名為name.7位hash的值.副檔名
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,  // 音訊檔案字尾
        loader: 'url-loader',
        options: {
          limit: 10000, // 小於10000位元組時的時候處理
          name: utils.assetsPath('media/[name].[hash:7].[ext]') // 檔名為name.7位hash的值.副檔名
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // 字型檔案
        loader: 'url-loader',
        options: {
          limit: 10000, // 字型檔案小於10000位元組的時候處理
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]') // 檔名為name.7位hash的值.副檔名
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
};

對webpack.base.conf中的 const vueLoaderConfig = require('./vue-loader.conf');
vue-loader.conf.js 程式碼如下：

'use strict';
const utils = require('./utils');
const config = require('../config');
// 判斷是否是生產環境
const isProduction = process.env.NODE_ENV === 'production';
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap;

module.exports = {
  // 處理 .vue檔案中的樣式
  loaders: utils.cssLoaders({
    // 是否開啟 source-map
    sourceMap: sourceMapEnabled,
    // 是否提取樣式到單獨的檔案
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
};

3-2 webpack.dev.conf.js

開發環境下的 webpack配置，通過merge方法合併 webpack.base.conf.js 基礎配置。
一些程式碼如下：

'use strict';
const utils = require('./utils');
const webpack = require('webpack');
const config = require('../config');

// webpack-merge是一個可以合併陣列和物件的外掛
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
module.exports = merge(baseWebpackConfig, {}）

模組配置

module: {
  // 通過傳入一些配置來獲取rules配置，此處傳入了sourceMap: false,表示不生成sourceMap
  rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
}

在utils.styleLoaders中的配置如下

/*
 生成style-loader的配置
 style-loader文件：https://github.com/webpack/style-loader
 @method styleLoaders
 @param {Object} options生成的配置
 @return {Array} style-loader的配置
*/
exports.styleLoaders = function (options) {
  const output = []; // 定義返回的陣列，陣列中儲存的是針對各型別的樣式檔案的處理方式
  const loaders = exports.cssLoaders(options); // 呼叫cssLoaders方法返回各型別的樣式物件(css: loader)

  for (const extension in loaders) { // 迴圈遍歷loaders
    const loader = loaders[extension]; // 根據遍歷獲得的key(extension)來得到value(loader)
    output.push({
      test: new RegExp('\\.' + extension + '$'), // 處理的檔案型別
      use: loader  // 用loader來處理，loader來自loaders[extension]
    });
  }
  return output;
};

上面的程式碼中呼叫了exports.cssLoaders(options),用來返回針對各型別的樣式檔案的處理方式
如下程式碼：

/*
 * 生成處理css的loaders配置
 * @method cssLoaders
 * @param {Object} options 生成的配置
 options = {
   // 是否開啟 sourceMap
   sourceMap: true,
   // 是否提取css
   extract: true
 }
 @return {Object} 處理css的loaders的配置物件
*/
exports.cssLoaders = function (options) {
  options = options || {};

  const cssLoader = {
    loader: 'css-loader',
    options: { // options是loader的選項配置
      // 根據引數是否生成sourceMap檔案 生成環境下壓縮檔案
      sourceMap: options.sourceMap
    }
  };

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  };

  // generate loader string to be used with extract text plugin
  /*
   生成ExtractTextPlugin物件或loader字串
   @method generateLoaders
   @param {Array} loader 名稱陣列
   @return {String | Object} ExtractTextPlugin物件或loader字串
   */
  function generateLoaders (loader, loaderOptions) { // 生成loader
    // 預設是css-loader
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader];

    if (loader) { // 如果引數loader存在
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, { // 將loaderOptions和sourceMap組成一個物件
          sourceMap: options.sourceMap
        })
      });
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    // 當extract為true時，提取css，生成環境中，預設為true
    if (options.extract) {  // 如果傳入的options存在extract且為true
      return ExtractTextPlugin.extract({  // ExtractTextPlugin分離js中引入的css檔案
        use: loaders, // 處理的loader
        fallback: 'vue-style-loader' // 沒有被提取分離時使用的loader
      });
    } else {
      return ['vue-style-loader'].concat(loaders);
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  // 返回css型別對應的loader組成的物件 generateLoaders()來生成loader
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  };
};

在styleLoaders函式內執行 const loaders = exports.cssLoaders(options); 呼叫cssLoaders方法返回各型別的樣式物件(css: loader)；所以最終loaders 會返回如下物件：

loaders = {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
};

執行generateLoaders()函式後，又會返回程式碼中的物件；如果是正式環境的話，css會分離；因此會返回如下的js物件：

return ExtractTextPlugin.extract({  // ExtractTextPlugin分離js中引入的css檔案
  use: loaders, // 處理的loader
  fallback: 'vue-style-loader' // 沒有被提取分離時使用的loader
});

如果是開發環境下的話；會返回：

return ['vue-style-loader'].concat(loaders);

最後在 styleLoaders函式中；會進行loaders迴圈；如下：

for (const extension in loaders) { // 迴圈遍歷loaders
  const loader = loaders[extension]; // 根據遍歷獲得的key(extension)來得到value(loader)
  output.push({
    test: new RegExp('\\.' + extension + '$'), // 處理的檔案型別
    use: loader  // 用loader來處理，loader來自loaders[extension]
  });
}

最後返回 output, 返回的陣列，陣列中儲存的是針對各型別的樣式檔案的處理方式。

外掛配置如下程式碼：

plugins: [
  new webpack.DefinePlugin({ // 編譯時配置的全域性變數
    'process.env': require('../config/dev.env') // 當前環境為開發環境
  }),
  // 開啟webpack熱更新功能
  new webpack.HotModuleReplacementPlugin(),

  new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.

  // webpack編譯過程中出錯的時候跳過報錯階段，不會阻塞編譯，在編譯結束後報錯
  new webpack.NoEmitOnErrorsPlugin(),
  // https://github.com/ampedandwired/html-webpack-plugin
  // 自動將依賴注入html模板，並輸出最終的html檔案到目標資料夾
  new HtmlWebpackPlugin({
    filename: 'index.html',  // 生成的檔名
    template: 'index.html',  // 模板
    inject: true
  })
]

下面是 webpack.dev.conf.js 所有的程式碼：

'use strict';
const utils = require('./utils');
const webpack = require('webpack');
const config = require('../config');

// webpack-merge是一個可以合併陣列和物件的外掛
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');

// html-webpack-plugin用於將webpack編譯打包後的產品檔案注入到html模板中
// 即自動在index.html裡面加上<link>和<script>標籤引用webpack打包後的檔案
const HtmlWebpackPlugin = require('html-webpack-plugin');

// friendly-errors-webpack-plugin用於更友好地輸出webpack的警告、錯誤等資訊
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const portfinder = require('portfinder');

const HOST = process.env.HOST;
const PORT = process.env.PORT && Number(process.env.PORT);

// 開發環境下的webpack配置，通過merge方法合併webpack.base.conf.js基礎配置
const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    // 通過傳入一些配置來獲取rules配置，此處傳入了sourceMap: false,表示不生成sourceMap
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  // 使用這種source-map更快
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true,
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll
    }
  },
  plugins: [
    new webpack.DefinePlugin({ // 編譯時配置的全域性變數
      'process.env': require('../config/dev.env') // 當前環境為開發環境
    }),
    // 開啟webpack熱更新功能
    new webpack.HotModuleReplacementPlugin(),

    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.

    // webpack編譯過程中出錯的時候跳過報錯階段，不會阻塞編譯，在編譯結束後報錯
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    // 自動將依賴注入html模板，並輸出最終的html檔案到目標資料夾
    new HtmlWebpackPlugin({
      filename: 'index.html',  // 生成的檔名
      template: 'index.html',  // 模板
      inject: true
    })
  ]
});

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port;
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err);
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port;
      // add port to devServer config
      devWebpackConfig.devServer.port = port;

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ // 友好的錯誤提示
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`]
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }));

      resolve(devWebpackConfig);
    }
  });
});

3-3 webpack.prod.conf.js

生產環境下的webpack配置，通過merge方法合併webpack.base.conf.js基礎配置
如下程式碼：

const path = require('path');
const utils = require('./utils');
const webpack = require('webpack');
// 配置檔案
const config = require('../config');
// webpack 配置合併外掛
const merge = require('webpack-merge');
// webpack 基本配置
const baseWebpackConfig = require('./webpack.base.conf');

const webpackConfig = merge(baseWebpackConfig, {});

module的處理,主要是針對css的處理, 同樣的此處呼叫了 utils.styleLoaders;

module: {
  // styleLoaders
  rules: utils.styleLoaders({
    sourceMap: config.build.productionSourceMap,
    extract: true,
    usePostCSS: true
  })
}

輸出檔案output

output: {
  // 編譯輸出的靜態資源根路徑 建立dist資料夾
  path: config.build.assetsRoot,

  // 編譯輸出的檔名
  filename: utils.assetsPath('js/[name].[chunkhash].js'),

  // 沒有指定輸出名的檔案輸出的檔名 或可以理解為 非入口檔案的檔名，而又需要被打包出來的檔案命名配置,如按需載入的模組
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

webpack.prod.conf.js 所有程式碼如下：

'use strict';
// node自帶的檔案路徑工具
const path = require('path');

const utils = require('./utils');
const webpack = require('webpack');

// 配置檔案
const config = require('../config');

// webpack 配置合併外掛
const merge = require('webpack-merge');

// webpack 基本配置
const baseWebpackConfig = require('./webpack.base.conf');

// webpack 複製檔案和資料夾的外掛
// https://github.com/kevlened/copy-webpack-plugin
const CopyWebpackPlugin = require('copy-webpack-plugin');

// 自動生成 html 並且注入到 .html 檔案中的外掛
// https://github.com/ampedandwired/html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 提取css的外掛
// https://github.com/webpack-contrib/extract-text-webpack-plugin
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// webpack 優化壓縮和優化 css 的外掛
// https://github.com/NMFR/optimize-css-assets-webpack-plugin
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');

// js壓縮外掛
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

// 如果當前環境為測試環境，則使用測試環境
// 否則，使用生產環境
const env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : require('../config/prod.env');

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    // styleLoaders
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
  // 是否開啟 sourceMap
  devtool: config.build.productionSourceMap ? config.build.devtool : false,
  output: {
    // 編譯輸出的靜態資源根路徑 建立dist資料夾
    path: config.build.assetsRoot,

    // 編譯輸出的檔名
    filename: utils.assetsPath('js/[name].[chunkhash].js'),

    // 沒有指定輸出名的檔案輸出的檔名 或可以理解為 非入口檔案的檔名，而又需要被打包出來的檔案命名配置,如按需載入的模組
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    // 配置全域性環境為生產環境
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env
    }),
    // js檔案壓縮外掛
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: { // 壓縮配置
          warnings: false // 不顯示警告
        }
      },
      sourceMap: config.build.productionSourceMap, // 生成sourceMap檔案
      parallel: true
    }),
    // extract css into its own file
    // 將js中引入的css分離的外掛
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'), // 分離出的css檔名
      // set the following option to `true` if you want to extract CSS from
      // codesplit chunks into this main css file as well.
      // This will result in *all* of your app's CSS being loaded upfront.
      allChunks: false
    }),
    // 壓縮提取出的css，並解決ExtractTextPlugin分離出的js重複問題(多個檔案引入同一css檔案)
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // 將 index.html 作為入口，注入 html 程式碼後生成 index.html檔案 引入css檔案和js檔案
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,  // 生成的html的檔名
      template: 'index.html',  // 依據的模板
      inject: true,  // 注入的js檔案將會被放在body標籤中,當值為'head'時，將被放在head標籤中
      minify: { // 壓縮配置
        removeComments: true,  // 刪除html中的註釋程式碼
        collapseWhitespace: true, // 刪除html中的空白符
        removeAttributeQuotes: true // 刪除html元素中屬性的引號

        // 更多選項 https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      // 必須通過 CommonsChunkPlugin一致地處理多個 chunks
      chunksSortMode: 'dependency'  // 按dependency的順序引入
    }),
    // keep module.id stable when vender modules does not change
    new webpack.HashedModuleIdsPlugin(),
    // enable scope hoisting
    new webpack.optimize.ModuleConcatenationPlugin(),
    // split vendor js into its own file
    // 分割公共 js 到獨立的檔案vendor中
    // https://webpack.js.org/guides/code-splitting-libraries/#commonschunkplugin
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor', // 檔名
      minChunks (module) { // 宣告公共的模組來自node_modules資料夾
        // any required modules inside node_modules are extracted to vendor
        // node_modules中的任何所需模組都提取到vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        );
      }
    }),
    /* 
     上面雖然已經分離了第三方庫,每次修改編譯都會改變vendor的hash值，導致瀏覽器快取失效。
     原因是vendor包含了webpack在打包過程中會產生一些執行時程式碼，執行時程式碼中實際上儲存了打包後的檔名。
     當修改業務程式碼時,業務程式碼的js檔案的hash值必然會改變。一旦改變必然
     會導致vendor變化。vendor變化會導致其hash值變化。
    */
    // 下面主要是將執行時程式碼提取到單獨的manifest檔案中，防止其影響vendor.js
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    }),

    // 複製靜態資源,將static檔案內的內容複製到指定資料夾
    // https://github.com/kevlened/copy-webpack-plugin
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
});

// 配置檔案開啟了gzip壓縮
if (config.build.productionGzip) {
  // 引入壓縮檔案的元件,該外掛會對生成的檔案進行壓縮，生成一個.gz檔案
  // https://github.com/webpack-contrib/compression-webpack-plugin
  const CompressionWebpackPlugin = require('compression-webpack-plugin');

  // 向webpackconfig.plugins中加入下方的外掛
  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]', // 目標檔名
      algorithm: 'gzip', // 使用gzip壓縮
      test: new RegExp(  // 滿足正規表示式的檔案會被壓縮
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240, // 資原始檔大於10240B=10kB時會被壓縮
      minRatio: 0.8  // 最小壓縮比達到0.8時才會被壓縮
    })
  );
}
// 開啟包分析的情況時， 給 webpack plugins新增 webpack-bundle-analyzer 外掛
if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}
module.exports = webpackConfig;

github上的專案

注意： 上面的配置程式碼都是從vue-cli上下載下來的，每個配置的含義都是從網上資料總結出來的，為了以後專案的需要直接可以拿來使用，且記錄下配置的含義；

打包策略自定義打包配置
2024-03-18
AB打包配置
2024-03-21
webpack打包地址配置
2019-01-18
Web
webpack根據需求配置打包模組及打包指令
2020-10-10
Web
Android 多渠道打包配置
2019-04-29
Android
ejb中配置檔案的打包
2005-09-08
webpack學習（二）初識打包配置
2019-06-07
Web
iview-admin多環境配置打包
2019-04-01
View
使用rollup打包庫的一種基本配置
2019-01-26
Webpack的基本配置和打包與介紹
2021-04-14
Web
Gradle模組化配置及多渠道打包
2018-01-19
Gradle
Android打包之配置構建變體
2018-03-20
Android
webpack多入口檔案頁面打包配置
2018-01-09
Web
VUE打包後配置配置檔案修改請求url方法及webpack打包的檔案生成同名檔案方法
2019-05-15
VueWeb
Webpack的基本配置和打包與介紹（二）
2021-04-15
Web
Webpack安裝配置及打包詳細過程
2020-11-10
Web
搭建vue cli4專案及打包配置
2021-01-05
Vue
jenkins配置android自動打包平臺
2018-06-30
JenkinsAndroid
Vue嚐鮮快速、零配置的打包工具—parcel~
2019-03-01
Vue
webpack4配置(1)-打包一個js檔案
2019-04-15
WebJS
webpack4多頁面打包腳手架配置
2018-11-28
Web
android studio 3.0 gradle 打包指令碼配置
2017-10-30
AndroidGradle指令碼
vue-cli 打包使用 history模式的後端配置
2018-01-08
Vue模式後端
Vue嚐鮮快速、零配置的打包工具---parcel~
2018-01-15
Vue
[ webpack4 ] 配置屬於自己的打包系統教程（二）—— 資源配置篇
2019-01-03
Web
[ webpack4 ] 配置屬於自己的打包系統教程（一）—— 基礎配置篇
2019-01-03
Web
關於vue-cli 3配置打包優化要點
2019-04-21
Vue優化
配置Tree Shaking來減少JavaScript的打包體積
2018-08-15
JavaScript
配置webpack作為你新輪子的打包工具
2019-01-03
Web
Gradle For Android（二）多渠道打包與簽名配置
2016-10-23
GradleAndroid
Gradle for Android（三）多渠道打包、配置簽名資訊
2016-08-31
GradleAndroid
詳解Parcel：快速，零配置web應用打包工具
2018-06-29
Web
在寶塔上配置打包好的vue3專案
2024-04-16
Vue
maven專案打包後war檔案丟失配置檔案
2019-02-24
Maven
webpack4配置(3)-打包css/js/圖片等資源
2019-04-16
WebCSSJS
vue-cli3打包後分離配置檔案
2019-02-16
Vue
全新打包工具parcel零配置vue開發腳手架
2018-01-11
Vue
[ webpack4 ] 配置屬於自己的打包系統教程（最終篇）—— 環境配置篇
2019-01-03
Web

vue-cli+webpack打包配置

相關文章