webpack4.x最新入门配置详解3

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打包文件就更小了！