自動化構(gòu)建工具WebPack

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

什么是 Webpack？

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

創(chuàng)新互聯(lián)網(wǎng)站建設(shè)服務(wù)商，為中小企業(yè)提供網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計服務(wù)，網(wǎng)站設(shè)計，網(wǎng)站托管運營等一站式綜合服務(wù)型公司，專業(yè)打造企業(yè)形象網(wǎng)站，讓您在眾多競爭對手中脫穎而出創(chuàng)新互聯(lián)。

安裝 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即可開始打包。

Webpack 打包css文件

（1） 下載對應(yīng)的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: {
     // 查找規(guī)則
     rules: [
       {
         test: /\.css$/,
         // 要加載使用Loader
         use: [
           'style-loader',
           'css-loader'
         ]
       }
     ]
   }
  };

Webpack打包圖像文件

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

Webpack熱加載技術(shù)

（1） 下載對應(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'
    },
   // 添加配置項   
   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",
      // 配置一個命令名稱
+     "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 自帶默認插件
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$/),
  // 編譯時(compile time)插件
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"production"',
  }),
  // webpack-dev-server 強化插件
  new DashboardPlugin(),
  new webpack.HotModuleReplacementPlugin(),
]

當(dāng)前題目：自動化構(gòu)建工具WebPack
URL網(wǎng)址：http://bm7419.com/article34/ijpgpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、外貿(mào)建站、手機網(wǎng)站建設(shè)、電子商務(wù)、企業(yè)網(wǎng)站制作、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計公司