Webpack入門簡介

什麼是Webpack

  我們在開發Java後端應用程序，可能會用maven來進行項目管理(編譯、打包、發佈、運行)，能夠節省我們人力成本。而webpack也是類似的軟件，只不過它是應用於前端。
  webpack一個項目構建工具，它是基於Node.js開發出來的一個前端工具，藉助webpack可以實現資源的合併、打包、壓縮等諸多功能。

webpack安裝

  在創建一個webpack管理的工程，我們需要通常需要執行npm init命令用於創建一個package.json文件

# 初始化一個npm工程 參數-y 表示默認配置 默認在當前目錄下創建一個package.json文件
[root@localhost temp-webpack]# npm init -y
# 進行全局安裝
[root@localhost temp-webpack]# npm install webpack webpack-cli -g

webpack配置文件

  每個通過webpack管理的項目，都需要一個配置文件，默認名字是webpack.config.js，我們可以手動創建該文件，這個配置文件用於Node.js執行，所以裏面的代碼只要符合Node.js語法即可，下面是該文件常用選項樣例：

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
//Node.js導出一個模塊
module.exports = {
    // 項目入口js文件 webpack主要依次文件作爲入口 進行處理
    entry : path.join(__dirname, './src/main.js'),
    //輸出目錄以及文件名字
    output : {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    //主要引入第三方的module 對module進行處理 如下所示 webpack默認只支持js文件，對於樣式文件
    //(css/less/scss)、靜態資源文件(圖片/字體)以及Vue模板文件均不支持，需要使用第三方loader進行處理
    module: {
        rules: [
            {test: /\.css$/, use:['style-loader', 'css-loader']},
            {test: /\.less$/, use:['style-loader', 'css-loader', 'less-loader']},
            {test: /\.scss$/, use:['style-loader', 'css-loader', 'sass-loader']},
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use:['url-loader?limit=2223&name=[hash:16]-[name].[ext]']},
            {test: /\.(ttf|eot|svg|woff|woff2)$/, use:['url-loader']},
            {test: /\.vue$/, use : 'vue-loader'},
            //webpack對於ES6某些語法不支持，因此需要使用babel-loader支持
            {test: /\.js/, use: 'babel-loader', exclude: /node_modules/}
        ]
    },
    //第三方plugin
    plugins: [
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        }),
        new VueLoaderPlugin()
    ],
    resolve: {
        alias: {
        	//解決import Vue from 'vue'加載的是runtime vue，通過下面配置可以加載完整版vue模塊
        	//表示以vue結尾就按照這個路徑加載
            "vue$": "vue/dist/vue.js"
        }
    }
}

webpack使用

  當我們修改完代碼後我們就可以在終端下面敲webpack命令，進行打包處理

# 必須在webpack.config.js所在目錄下執行webpack命令
# webpack必須全局安裝 如上面說明
[root@localhost temp-webpack]# webpack

自動打包編譯組件 – webpack-dev-server

安裝

  然而我們每次修改完代碼都需要手動執行webpack命令，很是麻煩，那麼有沒有什麼方式不用手動執行webpack命令呢？我們可以安裝webpack-dev-server，這個webpack-dev-server需要依賴本地webpack（即項目目錄中的webpack），所以我們需要再次安裝webpack，如下命令所示

[root@localhost temp-webpack]# npm install webpack webpack-cli -D
[root@localhost temp-webpack]# npm install webpack-dev-server -D

配置

  我們需要修改項目根目錄下面package.json文件（通過npm init命令生成的）中的script屬性，具體如下：

{
。。。
  "scripts": {
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  。。。
  }

我們加載dev配置

運行

  我們可以通過如下命令啓動webpack-dev-server

[root@localhost temp-webpack]# npm run dev

配置項說明

  webpack-dev-server有一些常用配置項，如下所示：

參數	說明	舉例
open	自動打開瀏覽器
port [value]	指定監聽端口	–port 9000
contentBase [value]	指定默認打開根路徑	contentBase dir_src
hot	熱更新	只把修改內容作爲更新補丁

第三方加載器

  webpack默認只支持js文件處理，對於樣式文件(css/less/scss)、靜態資源文件(圖片/字體)以及Vue模板文件均不支持，需要使用第三方loader進行處理。

#樣式文件加載器
[root@localhost temp-webpack]# npm install style-loader css-loader -D
[root@localhost temp-webpack]# npm install less less-loader -D
#靜態資源加載器
[root@localhost temp-webpack]# npm install file-loader url-loader -D
#vue模板加載器
[root@localhost temp-webpack]# npm install vue-loader vue-template-compiler -D

  安裝完加載器後需要增加相應的匹配規則，具體匹配規則如上面webpack配置文件中module所示。
對url-loader補充說明：

• url-loader後面是limit代表： 如果圖片大小 >= limit 則不會轉成base64，反之會轉成base64
• name 表示指定圖片名字格式 16位hash+原始名字+原始後綴名
• url-loader支持字體文件處理

Babel

  某些ES6語法webpack不支持，需要引入Babel loader進行處理。Babel會將ES6轉成ES3語法。

配置Babel步驟

• 步驟1：安裝相應包

# 核心組件
[root@localhost temp-webpack]# npm install babel-core babel-loader babel-plugin-transform-runtime -D
# 語法包
[root@localhost temp-webpack]# npm install babel-preset-env babel-preset-stage-0 -D

• 步驟2 在webpack.config.js中的module中增加匹配規則

    {test: /\.js/, use: 'babel-loader', exclude: /node_modules/}

• 步驟3 增加配置文件
  在項目根目錄下增加.babelrc配置文件，配置內容如下

{
  "preset":['env', 'stage-0'],
  "plugins":['transform-runtime']
}