webpack 1.x升级过程中的踩坑总结大全


Posted in Javascript onAugust 09, 2017

前言

大家应该都知道,Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。因为最近在对博客做SSR,无奈vue ssr demo或例子都是基于webpack2的。博主在webpack1.x上折腾了许久,vue-ssr-server-bundle.json文件生成仍然还是遥遥无期。最后还是乖乖地开始了webpack升级之旅。

本文主要记录升级过程中遇到的一些坑和解决办法,可能有些遗漏了,能记多少记多少吧。话不多说了,来一起看看详细的介绍吧。

webpack 1.x升级过程中的踩坑总结大全

错误:Error: Chunk.entry was removed. Use hasRuntime()

解决办法:升级extract-text-webpack-plugin ("extract-text-webpack-plugin": "^2.1.0",)

错误:Error: Breaking change: extract now only takes a single argument.

// 错误提示

Error: Breaking change: extract now only takes a single argument. Either an options object *or* the loader(s).
Example: if your old code looked like this:
 ExtractTextPlugin.extract('style-loader', 'css-loader')

You would change it to:
 ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })

原因是webpack2对loader的配置做了一些调整,修改 ExtractTextPlugin配置即可:

{
 test: /\.less$/,
 use: ExtractTextPlugin.extract({
  fallback: 'style-loader',
  use: ['css-loader', 'less-loader']
 })
},

htmlWebpackPlugin生成的html,没有引入css, app.js

修改配置,chunks属性使用files包裹

{
 filename: pageName + '.html',
 template: __dirname + '/src/' + pageName + '.html',
 chunks: pageConf.chunks,
 inject: true
};
{
 filename: pageName + '.html',
 template: __dirname + '/src/' + pageName + '.html',
 files: {
  chunks: pageConf.chunks,
 },
 inject: true
};

eslint不能识别es6语法

✘ http://eslint.org/docs/rules/ Parsing error: The keyword 'import' is reserved
 src\entry.client.js:7:1
 import { createApp } from './app'
 ^

解决办法:修改eslint配置,增加

"parser": "babel-eslint",

错误: Module build failed: BrowserslistError: Unknown version 57 of and_chr

npm 包过期,删除node_modules,从新安装依赖即可

webpack dist打包后,不生成公共css文件

vee-loader配置不对,加上配置 extractCSS: true

{
 test: /\.vue$/,
 loader: 'vue-loader',
 options: {
  extractCSS: isProd,
  preserveWhitespace: false,
  postcss: [
  require('autoprefixer')({
   browsers: ['last 3 versions']
  })
  ]
 }
},

小结

升级过程总体上还算顺利,vue-ssr-server-bundle.json也生成了,不过这仅仅是ssr的开始,一大堆问题等着解决。 如果不熟悉webpack2可以先花点时间看下官网介绍,英文不好的可以看翻译版。 整个升级过程总得来说,就是很多loader得升级,另一个要注意的就是loader的配置了,其它似乎没什么特别的地方。

总结

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 #Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 #Javascript
vuejs父子组件之间数据交互详解
Aug 09 #Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 #Javascript
浅谈react+es6+webpack的基础配置
Aug 09 #Javascript
js中less常用的方法小结
Aug 09 #Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 #Javascript
You might like
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
php中使用redis队列操作实例代码
2013/02/07 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
详解Vite的新体验
2021/02/22 Javascript
深入讲解Python编程中的字符串
2015/10/14 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
Python作用域与名字空间原理详解
2020/03/21 Python
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
护理毕业生自荐信范文
2013/12/22 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
目标管理责任书
2014/04/15 职场文书
活动总结模板
2014/05/09 职场文书
青年文明号口号
2014/06/17 职场文书
个人作风建设心得体会
2014/10/22 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书