webpack學習記錄（二）

參考書籍《深刻淺出webpack》

繼上章本文將介紹幾種經常使用的配置

1. Module

module 是用來配置處理模塊的規則，有如下三個主要部分。

• loader（見上章）
• noParse
• parse

1.2 noParse

noParse做用是過濾掉不須要解析的文件，從而提升性能，例如第三方庫（react,react-dom）

module: {
    noParse: '/react|react-dom/'
}
複製代碼

1.3 parse

同 noParse 配置項的區別在於，parser能夠精確到語法層面,能夠更細粒度地配置哪些模塊語法被解析、哪些不被解析，而 noParse 只能控制哪些文件不被解析。

module: { 
    rules : [ 
        parser: { 
            amd: false ／／禁用 AMD
            commonjs : false , ／／禁用 CommonJS
        }
    ]
}
複製代碼

2. Resolve

Resolve 配置 Webpack如何尋找模塊所對應的文件。

• alias
• extensions

2.1 alias

建立 import 或 require 的別名，來確保模塊引入變得更簡單。

若是我想引入位於/src/components/button的組件，在未配置alias前寫法是：

import Button from './src/components/button'

若是我配置了alias，就能夠簡寫成

import Button from 'components/button'

resolve:{ 
     alias : { 
     components : './src/components/'
     }
}
複製代碼

若是想命中具體的文件，能夠將alias寫成

resolve:{ 
    alias : { 
    'react$' :'./path/to/react.min .js'
    }
}
複製代碼

2.2 extensions

extensions配置可讓你在引入模塊時不寫後綴名

extensions : [ '.js' ,'json' ]   //這是默認配置
複製代碼

也就是說當你想引入react.js文件時，你能夠寫出這樣

import react from './path/to/react'
複製代碼

3. DevServer

DevServer是用來提升開發效率的，不是用來打包的。使用這個須要先安裝npm i -D webpack-dev-server,webpack-dev-server命令不能在終端中直接使用，須要在package.json中配置,而後npm run server才能啓動(命令能夠自定義)。

• hot
• port
• open
• contentBase

3.1 hot

這是DevServer最好用的功能，他可讓你寫完代碼後無需刷新，它會將你修改的代碼直接替換原來的代碼，實現局部更新。這個須要配套HotModuleReplacementPlugin一塊兒使用。

const webpack = require("webpack");//引入webpack 
module.exports = {
    devServer: {
        hot: true,//在服務中開啓模塊熱替換
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()//使用webpack的內置插件 
    ]
}
複製代碼

ps: 若是你使用使用了webpack的熱更新後，修改樣式文件，不能熱更新到樣式文件上。多是將樣式文件和js文件分開了，因此樣式文件不會生效。

3.2 port

devServer.host 配置項用於配置DevServer服務監昕的端口默認使用8080端口若是80端口巴經被其餘程序佔用，就使用 8081 ：若是 8081 仍是被佔用，則使用 8082 ，以此類推。

3.3 open

做用於 Dev Server 啓動且第一次構建完時，自動用咱們的系統的認瀏覽器去打開要開發的網頁。

3.4 contentBase

配置 DevServer HTTP 服務器的文件根目錄。若想將項目根目錄下的 public 目錄設置成 DevServer 服務器的文件根目錄，則能夠這樣配置。

devServer:{ 
    contentBase : path.join( dirname,’public ’)
}
複製代碼

4. devtool

選擇一種 source map 格式來加強調試過程。不一樣的值會明顯影響到構建(build)和從新構建(rebuild)的速度。
具體參考webpack中文網devtool