Webpack配置学习

标签： Nodejs 分类： Javascript 创建时间：2020-06-29 01:51:06 更新时间：2025-01-17 10:39:23

1.多入口文件

自动配置多入口的函数

function getEntry(src){
  let entry={};
  let dir=path.resolve(src);

  fs.readdirSync(dir).forEach((file)=>{
    var pathname=path.join(dir,file)
    if(fs.statSync(pathname).isDirectory()){
        travel(pathname,callback);
    }else{
      if(path.extname(pathname) === ".js" ){
        let fileName=path.basename(pathname);
        entry[fileName]=pathname;
      }
    }
  });
  return entry;
}

参考文章：
1.webpack配置
2.一文搞懂 Webpack 多入口配置
3.webpack多入口文件页面打包配置 (自动和手动配置多入口，这里还提到了一个叫glob的库)
4.Node.js path模块，获取文件后缀名
5.Node.js使用递归实现遍历文件夹中所有文件
6.Nodejs基础：路径处理模块path总结 (获取文件名及后缀，以及路径组合等技巧)

2.mini-css-extract-plugin

使用mini-css插件的时候，出现了错误：document is not defined，主要原因是因为mini-css和style-loader冲突，去掉style-loader模块即可。

module: {
    rules: [
      { // 加载css
        test: /\.css$/,
        use: [
          {
            loader:miniCssExtractPlugin.loader
          },
          // 'style-loader',
          'css-loader'
        ]
      }
    ]
  },

参考文章：
1.使用mini-css-extract-plugin 报错ReferenceError: window is not defined (非常有用)
2.使用mini-css-extract-plugin服务端报错document is not defined (没有用)
3.mini-css-extract-plugin with SSR

3.打包图片和字体到指定目录

module: {
    rules: [
      { // 加载图片
        test: /\.(png|svg|jpg|gif)$/,
        use: [{
          loader:'file-loader',
          options:{
            limit:10000,
            name:'img/[name]_[hash:8].[ext]'
          }
        }]
      },
      { // 加载字体
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [{
          loader:'file-loader',
          options:{
            limit:10000,
            name:'img/[name]_[hash:8].[ext]'
          }
        }]
      }
    ]
  }

参考文章：
1.webpack之输出路径处理

4.js压缩

在webpack4中使用uglifyjs-webpack-plugin，需要在mode为production时才起作用,当我在development模式下，进行压缩的时候,注释什么的都还是在的。

optimization: {
  minimizer: [
    new UglifyJsPlugin()
  ],
},

但是在production模式下，出现了打包错误的问题(解决方法查看下面的问题章节)

参考文章：
1.uglifyjs-webpack-plugin (官方文档)
2.Webpack4+Babel7优化70%速度 (这个有使用babel7和uglifyjs进行转码和压缩的方法)
3.注释压缩去掉不了
4.UglifyJS Webpack Plugin
5.webpack4代码压缩基本方法 (有css压缩和js压缩)

问题

(1) Unexpected token: name «i», expected: punc «;»
在使用webpack4对js代码进行压缩的时候，出现了上面的问题，怀疑可能时因为uglifyjs不支持es6模块，解决方法就是使用terser-webpack-plugin插件代替uglifyjs-webpack-plugin插件。

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

参考文章：
1.Cannot fix “Unexpected token name «i», expected punc «;»” from UglifyJs
2.terser-webpack-plugin (官方给出的仓库)
3.How to minify ES6 code using Webpack? (这里说，是因为可能不支持es6模块)
4.babel/minify (babel压缩方法)
5.在webpack用插件uglifyjs-webpack-plugin压缩ES6语法
6.webpack - babel配置 (webpack如何配置babel)
5.webpack4.x下babel的安装、配置及使用 (这个其实更加的清楚一些，只是写了webpack4.x和babel6.x的配置)
6.从零开始基于Vue的Webpack4及babel7配置 (上面写了babel7但是我觉得不是babel7,babel提供了babel.config.json配置文件，这里没写，还是用的.babelrc.json，我查了下管网，好像两者都是支持的。)
7.Configuration File Types

往期推荐

文章目录

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。