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在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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 curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
Nginx下配置codeigniter框架方法
2015/04/07 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
css配合jquery美化 select
2013/11/29 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
python动态加载变量示例分享
2014/02/17 Python
python制作一个桌面便签软件
2015/08/09 Python
Python 基础知识之字符串处理
2017/01/06 Python
Python实现抢购IPhone手机
2018/02/07 Python
Python Logging 日志记录入门学习
2018/06/02 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
python tkinter基本属性详解
2019/09/16 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
PHP面试题集
2016/12/18 面试题
软件缺陷的分类都有哪些
2014/08/22 面试题
关于赌博的检讨书
2014/01/08 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
辞职信怎么写
2015/02/27 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
工作年限证明范本
2015/06/15 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js