记一次webapck4 配置文件无效的解决历程


Posted in Javascript onSeptember 19, 2018

webpack@4.x的变化

先来说下webpack4和之前版本里一些主要的变化:

1、webpack不再支持node v4,这是因为新的webpack和附属插件使用了es6的语法,v4版本对es6不是很到位,所以,就不伺候了。

2、开始采取约定优于配置的思路,webpack@4.x里把很多选项都设置了默认值,比如入口就是./src,输出目录就是./dist,当然如果你自己去设置,它也不会拦着。所以在用webpack@4.x的时候,我们甚至都可以没有webpack.config.js这个配置文件也能一样打包。

3、拆分了旧版本里的webpack,分成了用来处理逻辑的webpack和提供可执行命令的webpack-cli,这也是有的同学把webpack装成新版本以后会报找不到webpack-cli模块这个错误的原因。

4、添加了mode选项,用来区分编译的环境,提供了development、production和none三个选项,理论上这个选项是强制指定的,其实不指定的话它也是有默认值的,但会给出一个warning,官方这么强烈建议了,就显式的指定一下吧。指定方式有两种,一是在启动命令里:

./node_modules/.bin/webpack --mode production

另外一种就是在配置文件里指定,方式如下:

var config = {
  mode: 'production' // 可选development、production和none
}

5、配置上的变动,类似删除了commonChunksPlugin,用optimization来代替这种。还有loader的用法也和1.15.0不一样了,但这个升级是在之前版本里就有的,不是webpack@4.x带来的。

6、性能优化,提高了打包性能。另外从webpack2起,引入了Tree-shaking机制来提出没有被引用的模块。它的原理是按着引用关系重新建立一个新的依赖树,而没有被引用的模块就不会被打包到最后的代码里。之前的压缩优化方式是先把所有模块都挂到树上,然后通过分析后,删掉没被引用的模块。从字面意思来看,我觉得原来的方式更像在摇树,把没用的摇下来。这两种方式最后压缩完的结果可能类似,但设计思路完全是从两个方向走的。

7、其他。以上这些就是一些比较主要的变化,更详细的升级文档可以参考下官方的说明:https://github.com/webpack/webpack/releases

前言

升级webpack4,一定要去看文档,特别是 更新说明 ,不要自持用过原本webpack就自己开始折腾。折腾到后面,可能就默默流下眼泪了。

webpack4的变化

webpack-cli抽离

webpack-cli被单独拆了出来,使用的时候如果只是全局装了CLI,直接执行的时候是可以的。

webpack --config ./config/webpack.dev.js

如果是写在npm hook里面会发现有点问题:

//package.json
"scripts": {
  "dev": "webpack --config ./config/webpack.dev.js"
 }
//shall
npm run dev

此时就会给提示:

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
 - webpack-command (https://github.com/webpack-contrib/webpack-command)
   A lightweight, opinionated webpack CLI.
We will use "npm" to install the CLI via "npm install -D".
Which one do you like to install (webpack-cli/webpack-command):

如果是我没有全局装,我肯定会意识到要选一个,这个坑关键是我全局装了。所以就在那折腾半天。

其实官方文档开头就说明了。

npm install webpack webpack-cli --save-dev

安装完成之后,继续执行发现有warning:

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

mode规则

配置规则:必须在production 和 development之间选择一种,以便webpack 使用相应模式的内置优化

  1. production支持所有类型的优化已生成最优bundles
  2. development允许注释、提示和eval devtool devtool的差别可以参考这里
  3. production不支持watching、development针对快速增量重建进行了优化
  4. production支持 module concatenating(Scope Hoisting)即作用域提升,可以将模块打包在一个函数里,这样减少了函数声明,文件体积也会减小。 详细参考看这里
  5. process.env.NODE_ENV被设置用来区分环境(仅仅在构建代码而非config里面)
  6. 有一个hidden none mode的模式可以禁用所有内容

用法:

1、配置文件中:

module.exports = {
entry: Entrys,
mode: 'development'
}

2、cli 参数传入

webpack --mode=development

两种方式都是可行的,不过我遇到过一个很坑的问题,困扰自己好几天,最后知道真相的自己眼泪掉下来后面再提这个问题。

零配置快速开始

因为一直被吐槽配置太累,加上parcel给的压力,webpack4也支持零配置打包了。

如果没有配置文件,会默认以./src/index.js作为entry开始打包。

如果配置了webpack.config.js或者指定了--config 的文件路径,则依据对应配置文件开始。

问题表现

在webpack.config.js中配置了entry、mode等相关属性,配置文件如下:

module.export = {
  mode:'production',
  entry:{
    app:'./src/test.js',
    index:'./src/test.js'
  },
  output: {
    path: process.cwd() + '/dist',
    filename: '[name].[hash].js',
    chunkFilename: '[name].[chunkhash].js',
    crossOriginLoading: 'anonymous'
  },
  cache: true,
  devtool: 'cheap-source-map',
  externals: {
    jquery: 'jQuery'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)?$/,
        include: [
          path.resolve(__dirname, "../src")
        ],
        exclude: [
          'node_modules',
          path.resolve(__dirname, "../node_modules")
        ],
        use: [
          {
            loader: 'babel-loader',
            options:{
              presets:['es2015']
            } 
          }
        ]
      }
    ]
  },
  resolve: {
    modules: [
      'node_modules'
    ],
    extensions: [".js", ".json", ".jsx", ".css"],
  },
  devServer: {
    proxy: { // proxy URLs to backend development server
      '/api': 'http://localhost:3000'
    },
    contentBase: path.resolve(__dirname, "../dist"),
    hot: true,
    open:true
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title:'test'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
}

package.json命令配置:

"scripts": {
  "build": "webpack --config webpack.prod.js"
 }
//执行打包
npm run build

发现始终会有上面选择mode类型的提示,这让人不能接受,另外提示没有./src/index.js文件,但是我的配置入口是别的文件,这样让人很莫名

ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/****'

本着跟着提示解决问题的原则,少文件那就建一个呗(后来发现这种思维有时候有用,有时候还真要慎重),问题表现虽然一致,实质可能有所不同。

新建之后是可以运行了但是我们的配置文件好像没起作用,

dist下的打包文件是默认的main.js

而非我们指定的app和index

为了确保进入配置文件,我打了几个log,竟然都有输出,说明进去了,这问题就诡异了。

console.log(path.resolve(__dirname, './src')) //输出正确路径
module.export = {
    //*****//
  }

版本统一

初步猜想是版本问题,确实也有issue上提到过某些版本存在问题,对照着官方demo锁定版本之后问题依然存在。

猜测:应该是配置文件存在错误

配置检查

将官方最基本的配置拉进来拷贝进来试了一下,依然存在问题没能解决。

猜测:本地的环境存在问题,npm,node等版本

查看之后发现版本都是满足的。

运行demo

将demo拉到本地并启动,demo正常打包,说明本地环境是ok的。那么问题就明显了,我的配置文件或者项目搭建有问题,对照着demo的配置项,配置项没有明显问题,这样的话将,配置信息放入到demo中去,修改之后发现起作用,我又重新审视了下我的配置文件,不仅仅局限于配置部分的时候,发现

//我的写法,这样webpack拿到的就是undefined了。
module.export
//别人的demo
module.exports

webpack的兼容处理

webpack会将 webpack --config 传入的文件与本身默认配置进行merge,保证本身打包不出错。为了证明我们的推论,将配置文件只剩下output属性,并加上src/index.js

module.exports = {
  output: {
    path: process.cwd() + '/dist1',
    // 直接的入口模zzz块名
    filename: '[name].js',
    // 非入口模块,也就是不需要打包到一起的,但又可能会用到,
    // 这不就是按需加载的么
    chunkFilename: '[name].[chunkhash].js',
    crossOriginLoading: 'anonymous'
  }
}

执行之后会发现打包到/dist1下面。所以上面写错module.exports的时候,走的完全是默认配置。前面的log打在了module.exports之前执行是正确的。

结尾

当遇到不可思议的问题的时候,建议静下心看一看,不要盲目搜索,另外最可靠的参考就是官方文档和实例,注意对比版本和环境,如果都没问题,那么再去尝试网上的各种解决方法。

这里总结一下给自己一个记录,希望解决思路能帮助其他人。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现宇宙星空背景效果的方法
Mar 03 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
vue3中的组件间通信
Mar 31 Vue.js
解决vue热替换失效的根本原因
Sep 19 #Javascript
三种Webpack打包方式(小结)
Sep 19 #Javascript
Vue.js更改调试地址端口号的实例
Sep 19 #Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 #Javascript
vue中的计算属性实例详解
Sep 19 #Javascript
Vue axios设置访问基础路径方法
Sep 19 #Javascript
json前后端数据交互相关代码
Sep 19 #Javascript
You might like
在PHP中使用与Perl兼容的正则表达式
2006/11/26 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
php上传文件问题汇总
2015/01/30 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
python daemon守护进程实现
2016/08/27 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS