webpack学习笔记(三)

1、resolve规则（查找文件的规则）

resolve: {
  extensions: ['.js', '.json', '.css', '.less', '.scss'], // 表示会依次按顺序进行匹配寻找文件
  alias: {
    bootstrap: path.join(
      __dirname,
      '/node_modules/bootstrap/dist/css/bootstrap.css'
    ), // 表示当引入bootstrap的时候默认引入该css文件
  },
  modules: ['node_modules', 'my_modules'], // 相当于指定查找文件的目标，添加my_modules进入查找目录
  mainFields: ['browser', 'module', 'main'], // 寻找指定文件夹下的package.json里的字段，默认是main字段，相当于入口字段
  mainFiles: ['main.js', 'index.js'], // 指定查找的文件名，默认是index.js
},

 注意：resolveLoader是加载plugin的一个机制，配置和resolve是一样的

 2、noParse

noParse字段，可以用于配置哪些模块文件的内容不需要进行解析, 这样可以提高性能，相当于不用生成ast树，进行依赖解析

module.exports = {
  ....
  module:｛
     noParse: /jquery|lodash/,
     noParse(content){
        return /jquery|lodash/.test(content)
     }
  ｝
  ....
}

注意：这个配置是写在module里面

3、DefinePlugin

DefinePlugin创建一些在编译时可以配置的全局变量

plugins: [
  ...
  new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: '1',
    EXPRESSION: '1+2',
    COPYRIGHT: {
      AUTHOR: JSON.stringify('bill'),
    },
  }),
],

调用

console.log(PRODUCTION)
console.log(VERSION)
console.log(EXPRESSION)
console.log(COPYRIGHT)

注意：通过这个配置，可以做一些区分，比如生产环境还是开发环境以及其他配置

 4、区分环境变量

在项目打包编译的时候，因为不同的环境需要不同的配置，这个时候通常有两种做法：

做法一：配置不同的配置文件，把development和production区别开，然后通过 webpack.merge进行拼装，具体做法见webpack学习小结

做法二：通过不同的传参来实现不同的配置

package.json中的配置

 同是更改webpack.config.js原本导出的是一个json，改成一个function

module.exports = (env, argv) => ({
   //这里会把所有package.json中 --变量名=值全部存入argv中，可以从argv中获取 ， 而env 是接收--env=***的值
    mode: env,
    ...
})

5、ignorePlugin

 这是webpack内置插件,作用是：忽略第三方包指定目录，让这些指定目录不要被打包进去。

举例：

moment包： 比如我们要使用moment这个第三方依赖库，该库主要是对时间进行格式化，并且支持多个国家语言。

import moment from 'moment'

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

注意： 虽然我设置了语言为中文，但是在打包的时候，是会将所有语言都打包进去的。这样就导致包很大，打包速度又慢

let Webpack = require('webpack');
plugins:[
    new Webpack.IgnorePlugin(/\.\/locale/,/moment/),//moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去
]

注意：我们虽然按照上面的方法忽略了包含’./locale/'该字段路径的文件目录,但是也使得我们使用的时候不能显示中文语言了，所以这个时候可以手动引入中文语言的目录

import moment from 'moment'

//设置语言

//手动引入所需要的语言包
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

let r = moment().endOf('day').fromNow();
console.log(r);

这样就OK了。既能够显示中文，又把不必要的语言包都忽略打包了

 6、对图片进行优化压缩

需要用到的依赖

npm i image-webpack-loader -D

 通常来讲使用的时候与url-loader一起使用，先进行image-webpack-loader进行对图片压缩然后再使用url-loader进行处理

{
  test: /\.(jpg|png|svg|jpeg|gif)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        // 表示当文件大小超过 30k的时候，那么就会把图片编译成base64格式的，url-loader内置file-loader
        limit: 2 * 1024,
        esModule: false,
        name: '[name].[hash].[ext]', // 表示输入的文件名
        outputPath: 'images', // 输出的文件所在的文件夹的名称
        publicPath: '/images', // 会对publicPath进行覆盖，在url引用的时候，把原有的前缀进行替换，如果不配置，系统会默认替换
      },
    },
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          progressive: true,
        },
        optipng: {
          enabled: false,
        },
        pngquant: {
          quality: [0.65, 0.9],
          speed: 4,
        },
        gifsicle: {
          interlaced: false,
        },
        // the webp option will enable WEBP
        webp: {
          quality: 75,
        },
      },
    },
  ],
}

 7、日志的优化

日志太多太少都不美观

可以修改stats

举例

stats: 'errors-only'

 可以使用插件  npm i friendly-errors-webpack-plugin -D

stats: {
  preset: 'minimal',
  moduleTrace: true,
  errorDetails: true,
},
plugins: [
  new FriendlyErrorsWebpackPlugin(),
  ...
]

具体配置祥见webpack官网

 8、费时分析

安装依赖

npm i speed-measure-webpack-plugin -D

使用

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const webpackConfig = smp.wrap({
  plugins: [
    new MyPlugin(),
    new MyOtherPlugin()
  ]
});

 9、项目打包分析

使用插件 webpack-bundle-analyzer

安装

npm i webpack-bundle-analyzer -D

使用

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

plugins: [
  ...
  new BundleAnalyzerPlugin(),
  ...
]

 配置分析，但是不自动打开浏览器

new BundleAnalyzerPlugin({
  analyzerMode: 'disabled', // 不启动展示打包报告的http服务器
  generateStatsFile: true, // 是否生成stats.json文件
}),

package.json中的命令配置