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

前言

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

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

错误: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的配置了,其它似乎没什么特别的地方。

总结

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

(0)

相关推荐

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

    前言 大家应该都知道,Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.因为最近在对博客做SSR,无奈vue ssr demo或例子都是基于webpack2的.博主在webpack1.x上折腾了许久,vue-ssr-server-bundle.json文件生成仍然还是遥遥无期.最后还是乖乖地开始了webpack升级之旅. 本文主要记录升级过程中遇到的一些坑和解决办法,可能有些遗漏了,能记多少记多少吧.话不多说了,来一

  • SpringCloud整合Activiti过程中的踩坑记录

    目录 前言 错误一:shiro与serurity冲突 处理:在启动类屏蔽SpringSecurity 处理:更换版本7.1.0.M4及以下 错误二:与mybatis冲突 处理:注释包中的MyBatis 关于idea插件 总结 前言 最近需要用到工作流,选择了Activiti,刚开始配置起来并没有很顺利.记录一下希望对读者们有帮助. 先来看我这边项目的环境:主要为JDK1.8,SpringbBoot2.3.5,MyBatis-Plus3.3.2, MySql8.0.21,Shiro1.5.3,id

  • Echarts在Taro微信小程序开发中的踩坑记录

    背景 近期笔者在使用Taro进行微信小程序开发,当引入Echarts图表库时,微信检测单包超限2M的一系列优化措施的踩坑记录,期望能指导读者少走一些弯路. 为什么选择Echarts? 微信小程序目录市面上使用最多的两款图表库,如下: echarts-for-weixin--echarts微信小程序版本 wx-charts--基于微信小程序的图表库 对比两款图表库优缺点刚好相反. echarts-for-weixin:功能强大,但体积非常大 wx-charts:功能相对简单,但体积小 由于笔者对e

  • 浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑

    前言 绝大多数网站都集成了第三方登录,降低了注册门槛,增强了用户体验.最近看了看 QQ 互联上 QQ 登录的接口文档.接入 QQ 登录的一般流程呢,是这样的:先申请开发者 -> 然后创建应用(拿到一组 AppId 和 AppKey)-> 获取 access_token -> 获取 openid -> 调用 openApi 访问或修改用户信息. 然而,从申请个人开发者开始,坑就来了. 1. 申请(个人)开发者 QQ 互联中申请开发者信息的页面,一些重点太过简陋,缺失细节,比如身份证正

  • iOS 条码及二维码扫描(从相册中读取条形码/二维码)及扫码过程中遇到的坑

    文章重点介绍如何解决,从手机相册中读取条形码和二维码的问题 1.扫码. 网上有特别的关于iOS扫码的代码和示例,其中扫码主要使用的是自带的AVFoundation类.这里就不细说了,要注意的是如何设置扫描区域,识别区域(这个值是按比例0~1设置,而且X.Y要调换位置,width.height调换位置) <span style="font-size:14px;">//创建输出流 AVCaptureMetadataOutput * output = [[AVCaptureMet

  • 实例分析nodejs模块xml2js解析xml过程中遇到的坑

    本文实例讲述了nodejs模块xml2js解析xml过程中遇到的坑.分享给大家供大家参考,具体如下: 在一个项目中,用到nodejs模块xml2js解析xml,xml的数据如下: <xml> <MsgId>6197906553041859764</MsgId> </xml> 用xml2js中的xml2js.parseString 方法解析,本来以为是一个json,但总是解析失败,把解析的结果log下后如下: { xml: { MsgId: [ '619790

  • Angular 4.X开发实践中的踩坑小结

    本文主要给大家分享了关于Angular 4.X开发中与到的一些踩坑经验,分享出来供大家参考学习,下面来一起看看详细的介绍: 一.使用ngIf或者ngSwitch出错 在html文件中使用ngIf或者ngSwitch时,会解析出错,错误提示如下: Error: Template parse errors: Can't bind to 'ngSwitch' since it isn't a known property of 'div'. 这个是因为没有在此Component所在的Module中导入

  • 浅谈springfox-swagger原理解析与使用过程中遇到的坑

    swagger简介 swagger确实是个好东西,可以跟据业务代码自动生成相关的api接口文档,尤其用于restful风格中的项目,开发人员几乎可以不用专门去维护rest api,这个框架可以自动为你的业务代码生成restfut风格的api,而且还提供相应的测试界面,自动显示json格式的响应.大大方便了后台开发人员与前端的沟通与联调成本. springfox-swagger简介 签于swagger的强大功能,java开源界大牛spring框架迅速跟上,它充分利用自已的优势,把swagger集成

  • 详解升级react-router 4 踩坑指南

    一.前言 上午把近日用React做的一个新闻项目所依赖的包升级到了最新的版本,其中从react-router(2.8.1)升级到react-router(4.1.2)中出现了很多问题, 故总结一下在升级过程中遇到的问题. 二.react-router,V4版本修改内容 1. 所有组件更改为从react-router-dom导入 之前的所有路由组件均是从react-router中导入,在我之前的项目中,导入相关组件如下: //v2 import {Router,Route,hashHistory}

  • idea 与 maven 使用过程中遇到的问题及解决方案

    目录 1. maven项目导入idea报ComponentLookupException异常 1.1. 问题描述 1.2.解决方案 2. IDEA无法加载maven本地仓库的文件 2.1.问题描述 2.2.解决方案 3.删除maven下载失败的jar包 3.1. 问题描述 3.2.解决方案 4. 删除_maven.repositories文件 4.1.问题描述 4.2.解决方案 1. maven项目导入idea报ComponentLookupException异常 1.1. 问题描述 最近将ID

随机推荐