webpack進階

基於 webpack 提供的接口，社區能夠貢獻各類 loader 和 plugin，組合使用能夠使得 webpack 的功能很豐富強大。

經常使用 loader

• sass-loader，css-loader，style-loader => 加載樣式
• url-loader => 加載文件，如字體文件和圖片文件
• html-loader => 加載模板文件
• babel-loader => 加載 js 和 jsx 文件
• awesome-typescript-loader => 加載 ts 文件

經常使用 Plugin

html-webpack-plugin

1. 安裝依賴

npm install html-webpack-plugin --save-dev

1. 配置 modules

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // ...
  modules:[
    new HtmlWebpackPlugin({
      template:'./index.html', // 引用的模板
      filename:'index.html', // 打包後的命名
      inject:true, // 是否自動引入打包的js文件
    })
  ]
}

1. 引用中的模板（index.html）能夠使用一些變量及簡單的分支

// index.html
<% if(process.env.NODE_ENV==='development'){ %>
    1313
<% } %>
<script>
   console.log(<%= JSON.stringify(process) %>);
   console.log(<%= JSON.stringify(process.env) %>);
</script>

其中 JSON.stringify(process)，解析爲一個對象 ，JSON.stringify(process.env) 爲空對象

<script>
      console.log({"title":"browser","browser":true,"env":{},"argv":[],"version":"","versions":{}});
      console.log({});
</script>

這時候的 process.env.NODE_ENV 是爲 undefined，須要手動設置其值，看 webpack.DefinePlugin ⤵️。

1. 與 html-loader 衝突的問題，若是使用了 html-loader 加載 .html 後綴文件，將不會處理 <% %> 規則。HtmlWebpackPlugin 的 template 使用別的後綴，將原模板的後綴相應更改便可。

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  module:{
    rules:[
      {
        test:/\.html$/,
        loader:'html-loader'
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'index.htm', // 這裏後綴改爲和 .html 不同的
      filename:'index.html',
      inject:true,
    })
  ]
}

webpack.DefinePlugin

配置一些全局變量，開發和打包過程當中，直接將代碼中相應的變量變成配置的值。值須要進行 JSON.stringify 處理。

// webpack.config.js
const wepback = require('webpack')

module.exports = {
  plugins:[
    new webpack.DefinePlugin({
      'process.env':{
        'NODE_ENV':JSON.stringify('development')
            },
      'BASE_URL':JSON.stringify('https://haokur.com')
    })
  ]
}

// index.htm
<%if(process.env.NODE_ENV==='development'){%>
      123
<%}%>
<script>
      console.log(<%= process %>);
      console.log(<%= JSON.stringify(process) %>);
      console.log(<%= JSON.stringify(process.env) %>);
      console.log(<%= BASE_URL %>);
</script>

// main.js
console.log(BASE_URL);

打包後：

<!-- 打包後的代碼，dist/index.html --> 
123
<script>
    console.log([object Object]);
    console.log({"title":"browser","browser":true,"env":{},"argv":[],"version":"","versions":{}});
    console.log({"NODE_ENV":"development"});
    console.log(https://haokur.com);
</script>

// 打包後的 main.js
console.log('https://haokur.com')

• <%if %> 判斷，判斷爲真，則顯示裏面內容，不然忽略；
• <%= process %> 直接解析出來，爲 [object Object]
• BASE_URL 解析出來的沒有加上兩邊的引號，但在 js 中解析成字符串會加上兩邊的冒號
• 非 HtmlWebpackPlugin.template 定義的模板頁的除 js 以外的其餘文件，不支持此解析功能

webServer 本地開發服務器

1. 安裝依賴

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

1. webpack 配置

module.exports = {
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true, // 是否開啓熱加載替換
    compress: true,
    host: '0.0.0.0', // 設置爲localhost時，不能用本地ip訪問
    port: 8080,
    open: true, // 是否自動瀏覽器打開
    }
}

其餘參數不一一介紹，使用時查文檔 https://www.webpackjs.com/configuration/dev-server/

1. package.json 配置命令

{
  "scripts":{
    "start":"webpack-dev-server",
    "build":"webpack"
  }
}

1. 運行命令

# 本地開發
npm start

# 打包
npm run build