自動化構建工具WebPack

Webpack中文文檔：https://www.webpackjs.com/

什么是 Webpack？

webpack 是一個模塊打包器。webpack 的主要目標是將 JavaScript 文件打包在一起，打包后的文件用于在瀏覽器中使用，但它也能夠勝任轉換(transform)、打包(bundle)或包裹(package)任何資源(resource or asset)。

安裝 Webpack

# 全局安裝
npm install webpack -g
# 局部安裝
npm install webpack --save-dev

由于webpack1.x和3.x版本存在區別，全局安裝webpack以后，再局部安裝可以避免版本沖突或不合適的情況

Webpack 打包js文件

    # webpack 原始js文件路徑 打包后存放js文件路徑
    webpack src/js/entry.js dist/js/bundle.js

Webpack 的配置文件webpack.config.js

const path = require('path');

module.exports = {
  // 入口文件
  entry: './src/index.js',
  // 打包后輸出的配置塊
  output: {
    // 文件名
    filename: 'bundle.js',
    // 調用resolve()設置路徑
    path: path.resolve(__dirname, 'dist')
  }
};

配置完成以后，只需要執行webpack即可開始打包。

Webpack 打包css文件

（1） 下載對應的loader加載器：

npm install css-loader style-loader --save-dev
npm install file-loader url-loader --save-dev

url-loader是對 file-loader高層封裝，需要配合file-loader使用。

（2） 配置使用：

const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
   // 添加模塊配置
   module: {
     // 查找規則
     rules: [
       {
         test: /\.css$/,
         // 要加載使用Loader
         use: [
           'style-loader',
           'css-loader'
         ]
       }
     ]
   }
  };

Webpack打包圖像文件

（1） 下載對應的loader加載器：

npm install --save-dev file-loader

（2） 配置使用：

const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
       // 添加模塊配置項
       {
         test: /\.(png|svg|jpg|gif)$/,
         use: [
           'file-loader'
         ]
       }
      ]
    }
  };

Webpack熱加載技術

（1） 下載對應的安裝包：

npm install --save-dev webpack-dev-server

（2） 配置使用：

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
   // 添加配置項   
   devtool: 'inline-source-map',
   devServer: {
     // 服務器內容目錄
     contentBase: './dist'
   },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

（3） 添加腳本命令：

{
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "watch": "webpack --watch",
      // 配置一個命令名稱
+     "start": "webpack-dev-server --open",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^0.1.16",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^3.0.0",
      "xml-loader": "^1.2.1"
    }
  }

Webpack插件的使用

var webpack = require('webpack');
// 導入非 webpack 自帶默認插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');

// 在配置中添加插件
plugins: [
  // 構建優化插件
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'vendor-[hash].min.js',
  }),
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false,
      drop_console: false,
    }
  }),
  new ExtractTextPlugin({
    filename: 'build.min.css',
    allChunks: true,
  }),
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  // 編譯時(compile time)插件
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"production"',
  }),
  // webpack-dev-server 強化插件
  new DashboardPlugin(),
  new webpack.HotModuleReplacementPlugin(),
]