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

什么是 Webpack？

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

目前成都創(chuàng)新互聯(lián)公司已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、河北網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

安裝 Webpack

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

由于webpack1.x和3.x版本存在區(qū)別，全局安裝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',
    // 調(diào)用resolve()設(shè)置路徑
    path: path.resolve(__dirname, 'dist')
  }
};

配置完成以后，只需要執(zhí)行webpack即可開(kāi)始打包。

Webpack 打包c(diǎn)ss文件

（1） 下載對(duì)應(yīng)的loader加載器：

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

url-loader是對(duì) 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: {
     // 查找規(guī)則
     rules: [
       {
         test: /\.css$/,
         // 要加載使用Loader
         use: [
           'style-loader',
           'css-loader'
         ]
       }
     ]
   }
  };

Webpack打包圖像文件

（1） 下載對(duì)應(yīng)的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'
          ]
        },
       // 添加模塊配置項(xiàng)
       {
         test: /\.(png|svg|jpg|gif)$/,
         use: [
           'file-loader'
         ]
       }
      ]
    }
  };

Webpack熱加載技術(shù)

（1） 下載對(duì)應(yīng)的安裝包：

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'
    },
   // 添加配置項(xiàng)   
   devtool: 'inline-source-map',
   devServer: {
     // 服務(wù)器內(nèi)容目錄
     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",
      // 配置一個(gè)命令名稱
+     "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');
// 導(dǎo)入非 webpack 自帶默認(rèn)插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');

// 在配置中添加插件
plugins: [
  // 構(gòu)建優(yōu)化插件
  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$/),
  // 編譯時(shí)(compile time)插件
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"production"',
  }),
  // webpack-dev-server 強(qiáng)化插件
  new DashboardPlugin(),
  new webpack.HotModuleReplacementPlugin(),
]

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站名稱：自動(dòng)化構(gòu)建工具WebPack-創(chuàng)新互聯(lián)
文章起源：http://weahome.cn/article/cssigj.html