webpack4.x最新入門配置詳解3

目錄

1. resolve屬性的配置
2. 定義和區分環境變量
3. noParse
4. IgnorePlugin

1. resolve屬性的配置

webpack.config.js中配置示例：

resolve:{  // 解析 第三方包
    modules:[path.resolve('node_modules')], // 指定的搜索目錄
    extensions:['.js','.css','.json','.vue'], // 解析的擴展名
    mainFields:['style','main'],  //文件夾中package.json裏指定字段的路徑
    mainFiles:[],  // 入口文件的名字
    alias:{        // 創建別名
        bootstrap:'bootstrap/dist/css/bootstrap.css'
    }
},

2. 定義和區分環境變量

我們開發項目一般都是有開發環境和生產環境；
那麼，項目裏如何判斷當前環境呢？
我們可以使用webpack裏內置的插件,配置如下：
在webpack.config.js->plugins中：

new webpack.DefinePlugin({
    DEV:JSON.stringify('production')
}),

// index.js
let url = '';
if(DEV === 'dev') {
    url = 'http://localhost:3000'
}else{
    url = 'http://www.baidu.com'
}
console.log('當前地址是：',url)

上面的配置雖然能夠設置開發或生產環境，但是每次都需要修改配置文件，不是很方便；

實際項目中，我們會創建兩個配置文件webpack.dev.js開發環境配置和webpack.prod.js生產環境配置；

我們可以將原來的webpack.config.js文件改名爲webpack.base.js文件，作爲一個基礎公共配置文件。
把它引入到下面創建的webpack.dev.js和webpack.prod.js文件中，然後在這兩個文件內部寫相應環境的配置。

這裏需要安裝個插件：

npm i webpack-merge -D

// webpack.prod.js
let {smart} = require('webpack-merge');
let base = require('./webpack.base.js');

module.exports = smart(base,{
    mode:'production'
})

// webpack.dev.js
let {smart} = require('webpack-merge');
let base = require('./webpack.base.js');

module.exports = smart(base,{
    mode:'development'
})

執行命令：

npm run build -- --config webpack.dev.js  // 打包開發環境

npm run build -- --config webpack.prod.js  // 打包生產環境

3. noParse

項目裏可能會用到一些庫，比如jquery等；這些庫沒有依賴庫，因此不需要webpack來解析；
例如，在webpack.config.js->module裏配置：

noParse:/jquery/,  // 不去解析jquery中的依賴項

這樣，在使用一些比較大的庫的時候，webpack打包速度會更快；

4. IgnorePlugin

我們在查找JS文件的過程中，可以通過配置exclude和include來優化JS文件查找：
例如，webpack.config.js->module->rules中配置：

{
    test:/\.js$/,
    exclude:/node_module/, // 排除目錄
    include:path.resolve('src'), //包含目錄
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                '@babel/preset-env',
                '@babel/preset-react'
            ]
        }
    }
}

exclude和include只要設置一個就可以了

我們在安裝一些插件比如moment（一個輕量級的JavaScript日期庫，用於解析，驗證，操作和格式化日期

 npm i moment

使用：

// index.js
import moment from 'moment'

// 設置語言
moment.locale('zh-cn');
let r = moment().endOf('day').fromNow();
console.log(r)

運行效果：


由上圖可以看出，我們使用moment裏的方法的時候，是在node_module文件裏找到moment文件，再根據裏面的package.json內容的mian的值./moment.js確定入口；

由上圖，在./moment.js文件中，我們可以看出引入了./locale/文件，這個文件它放置了所有的語言包；而我們只需要中文包，它卻把所有的包都引入了；

爲此，我們可以配置webpack.config.js->plugins:

new webpack.IgnorePlugin(/\.\/locale/,/moment/), // 如果從moment中引入了locale，我們就把他忽略掉

然後，手動引入中文包：

// index.js
import moment from 'moment'

// 手動引入所需要的語言包
import 'moment/locale/zh-cn'
// 設置語言
moment.locale('zh-cn');
let r = moment().endOf('day').fromNow();
console.log(r)

這樣，webpack打包文件就更小了！