webpack基本使用

簡介

本人Java後臺狗一枚，本着全「幹」工程師的目的，一邊學習一邊努力提高本身。本文記錄了使用webpack進行打包項目的過程。

webpack是一款時尚的模塊加載和打包工具，當下主流的開源項目都已經使用webpack進行開發，因此，使用webpack，走在時尚的潮流（玩笑話）。

附：Webpack官網

步驟

安裝

常規使用方法，新建項目npm init，使用npm install webpack --save-dev進行安裝。

配置

咱們須要告訴webpack須要作一些什麼，新建文件配置文件webpack.config.js。並參考如下配置：

const webpack = require('webpack')
const webpackConfig = {
  name: 'client',
  target: 'web',
  devtool: 'source-map',
  resolve: { //其它解決方案配置
    root: paths.client(),
    extensions: ['', '.web.js', '.js', '.jsx', '.json']
  },
  module: {},
  postcss: []
}

webpackConfig.entry = { //頁面入口文件配置
  app: __DEV__
    ? ['whatwg-fetch', APP_ENTRY].concat(`webpack-hot-middleware/client?path=${config.compiler_public_path}__webpack_hmr`)
    : ['whatwg-fetch', APP_ENTRY],
  vendor: config.compiler_vendors
}

webpackConfig.output = { //入口文件輸出配置
  filename: `js/[name].[${config.compiler_hash_type}].js`,
  chunkFilename: 'js/[name].[chunkhash].js',
  path: paths.dist(),
  publicPath: config.compiler_public_path
}

webpackConfig.module.loaders = [{ //加載器配置
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  loader: 'babel',
  query: {
    cacheDirectory : true,
    plugins        : ['transform-runtime'],
    presets        : ['es2015', 'react', 'stage-0']
  }
}, {
  test: /\.json$/,
  loader: 'json'
}]

webpackConfig.plugins = [ //插件配置
  new webpack.DefinePlugin(config.globals),   //將config.globals變量定義在開發代碼中
  new HtmlWebpackPlugin({
    template: paths.client('index.html'),
    hash: false,
    favicon: paths.client('static/favicon.ico'),
    filename: viewName,
    inject: 'body',
    minify: {
      collapseWhitespace: true
    }
  })
]

其中 plugins 是插件項，entry 是頁面入口文件配置，output 是對應輸出項配置（即入口文件最終要生成什麼名字的文件、存放到哪裏）,module.loaders 是最關鍵的一塊配置。它告知 webpack 每一種文件都須要使用什麼加載器來處理。

運行

其中推薦執行命令爲以下：

webpack --display-error-details

webpack --config XXX.js   //使用另外一份配置文件打包

webpack --watch   //監聽變更並自動打包

webpack -p    //壓縮混淆腳本

webpack -d

總結

webpack版本更新的很快，建議及時去中文官網中查看相關文檔。