簡單說說webpack的配置檔案

妙筆生花發表於2018-05-09
Web

webpack是前端最流行的打包工具之一，我們應該當對其有所瞭解；
來看一下webpack的配置檔案：

module.exports = { //暴露出去的物件
  context: path.resolve(__dirname, '../'), 上下文
  entry: {  // 打包的檔案入口 
    app: './src/main.js' // String Object Array
  },
  output: { // 打包檔案的輸出
    path: config.build.assetsRoot, //輸出路徑
    filename: '[name].js', //輸出檔案的命名根據entry裡的app命令最終是app.js
    publicPath: process.env.NODE_ENV === 'production' //請求資源的靜態絕對路徑
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: { //模組的解析 程式碼中引入模組的相關解析
    extensions: ['.js', '.vue', '.json'], //import模組檔案自動補全檔案路徑
    alias: { //別名 require路徑中可以使用別名縮短長度
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: { //模組 處理各種資原始檔
    rules: [    //根據不同檔案的字尾用不同的loader去處理
      // ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/, //正則匹配.vue結尾的檔案
        loader: 'vue-loader', //使用vue-loader處理
        options: vueLoaderConfig //loader的可選項
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
  plugins: [ // 外掛列表
    // ...
  ],
}
複製程式碼

webpack中的核心概念總結起來就是Entry、Output、Loaders、Plugins、Chunk。
Entry：指定webpack構建模組的入口檔案，並且構建直接或者間接引入的模組。 Output：指定webpack輸出檔案的命名以及路徑。 Loaders：處理各種資原始檔如js、sass、less，將這些檔案處理成webpack能夠處理的模組。 Plugins：對檔案的壓縮、打包、甚至重新定義環境中的變數。 Chunk：其實就是將一些程式碼打包成一個單獨的chunk，比如某些公共模組，去重，更好的利用快取。或者按需載入某些功能。

相關文章