`

学习webpack

阅读更多
  很好的文章:

  《Webpack傻瓜式指南(一)》
  文章地址:https://zhuanlan.zhihu.com/p/20367175?columnSlug=FrontendMagazine
  
  《Webpack傻瓜式指南(二)》
  文章地址:https://zhuanlan.zhihu.com/p/20397902?columnSlug=FrontendMagazine

  《Webpack傻瓜式指南(三)》
  文章地址:https://zhuanlan.zhihu.com/p/20522487?columnSlug=FrontendMagazine

  跑通了文章中示例,基本掌握了webpack,谢谢作者。

  一些小的补充:

一、webpack.ProvidePlugin使用
  文中仅给出了代码:
  new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]

  要require("webpack"),或者import,不然会报webpack is not defined的错误。我Node.js只是略懂,费了好大劲儿才解决。

二、Uncaught ReferenceError: __WEBPACK_AMD_DEFINE_ARRAY__ is not defined
  如果启动后打开网页不显示任何内容,查看控制台报错信息为:Uncaught ReferenceError: __WEBPACK_AMD_DEFINE_ARRAY__ is not defined
  应该是web服务没有启动完成,过一会儿再刷新页面就可以了。

三、控制台报错:Super expression must either be null or a function, not undefined
  敲错了个字母,坑呀!
class App extends React.Compoment

四、控制台报错:Unexpected character '@'
  上面错误出现在加载bootstrap时,由于加载器参数有问题,将css、sass两个加载器分开写就可以了。
{test: /\.css$/, loader: "style!css"},
{test: /\.scss$/, loader: "style!css!sass"},


五、控制台报错:bootstrap tooltips require tether
  似乎要装个插件,不影响使用,暂不管它。

六、执行搜索时,控制台报错:undefined is not a function
  这个似乎是作者的一个笔误,plist.jsx文件改一下就行,将
import {get} from '../utils/ajax';

  改为:
import get from '../utils/ajax';


七、ajax.js文件内容
  这个文章中没有给出,可以从文章末尾很硬的链接中找到
export default function get(url) {
  return new Promise(function(resolve, reject) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.send(null);
    xhr.addEventListener('readystatechange', function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        try {
          const data = JSON.parse(xhr.responseText);
          resolve(data);
        } catch (e) {
          reject(e);
        }
      }
    });
    xhr.addEventListener('error', function(error) {
      reject(error);
    });
  });
}
分享到:
评论

相关推荐

    webpack5配置之vue3

    基于webpack5构建的vue3项目,可用来学习webpack5的常用配置,和常见优化。https://webpack.docschina.org/plugins/image-minimizer-webpack-plugin/#root。 基于webpack5构建的vue3项目,可用来学习webpack5的常用...

    阅读学习webpack

    本项目用于阅读学习webpack源码,项目基于webpack3.10.0版本。wepack源码以及注释放在debug_node_modules文件夹下。

    学习webpack的笔记,基于webpack5.zip

    适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】: 项目具有较高的学习借鉴价值,也可直接拿来修改复刻。 对于有一定基础或热衷于研究...

    webpack 教材学习

    Webpack 是一个现代JavaScript应用程序的...深入学习Webpack,不仅可以提升前端开发技能,还能为你的项目带来更高效的构建流程。通过阅读和实践提供的教材,你可以逐步掌握Webpack 的精髓,并将其应用到实际项目中。

    此项目用于vue学习webpackvue2vuecliEchart3

    在这个"Vue学习项目"中,开发者将能够深入理解如何结合Vue 2、Webpack、Vue CLI以及ECharts 3来创建一个完整的前端应用。以下是对这些技术的详细说明: 1. **Vue 2**:Vue 2引入了虚拟DOM、组件的props选项、async ...

    webpack:学习webpack

    在深入学习Webpack之前,我们首先要了解JavaScript模块化的基本概念。在ES6中,我们有`import`和`export`关键字来处理模块导入和导出。Webpack 就是基于这样的模块化思想来工作,它可以将这些模块进行静态分析,并...

    Webpack4中文手册(4.39.3).pdf

    手册中的指南部分提供了对Webpack核心概念的介绍,以及如何开始学习Webpack。指南部分可能涵盖如下内容:Webpack的工作原理,核心概念如entry、output、loader、plugin等,以及如何开始进行项目配置。 Webpack中文...

    vue2 + webpack5相适配的 能成功打包的 package.json 文件

    适宜人群:想要学习 webpack 配置的,各个版本之间出现问题的,想要解决各种配置报错的,想要 vue2 + webpack5 成功创建项目的都可以; 小记:这只是配置的 package.json 文件,更有配置好的 webpack.config.js ...

    Deep-in-Webpack:关于学习Webpack的回购

    标题 "Deep-in-Webpack:关于学习Webpack的回购" 提示我们这是一个专门针对深入学习 Webpack 的资源库。这个仓库可能包含了一系列教程、实践项目、配置示例等,旨在帮助开发者掌握 Webpack 的高级用法。 描述 "深度...

    基于慕课网学习webpack与react创建项目.zip

    适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】: 项目具有较高的学习借鉴价值,也可直接拿来修改复刻。 对于有一定基础或热衷于研究...

    webpack学习资料

    配置文件的编写是学习Webpack的重点,理解每个选项的含义和用法,可以帮助我们更好地定制构建流程。 通过学习这些基本概念并实践操作,你可以掌握Webpack的核心能力,从而高效地管理和构建现代前端应用。同时,随着...

    webpack-demo.zip

    本`webpack-demo.zip`压缩包提供了从零开始学习Webpack的基础步骤,包括安装、配置以及创建首个打包实例的全过程。这个教程特别适合Webpack初学者,旨在帮助他们快速入门并解决可能遇到的问题。 ### 1. Webpack ...

    learning-webpack:学习 webpack

    在深入学习 webpack 之前,我们需要了解它在现代前端开发中的核心价值:将分散的模块化代码整合成单一或多个浏览器可执行的文件,同时处理样式、图片等资源,实现代码的优化和构建自动化。 在 "学习 webpack" 的...

    learn_webpack5:学习webpack5

    在深入学习Webpack 5之前,我们需要了解它的核心概念,包括入口(entry)、输出(output)、loader 和插件(plugins)。 **一、Webpack 5 的核心概念** 1. **入口(entry)**:入口是Webpack构建过程的起点,定义了应用的...

    ng-webpack-demo:用于学习webpack配置

    4. **Optimization**:学习Webpack的优化策略,如`optimization.minimize`开启压缩,`optimization.runtimeChunk`和`optimization.splitChunks`进行代码分割。 在`ng-webpack-demo`项目中,你可以通过阅读和修改...

    WEBPACK-SIMPLE.zip

    Webpack 是一个现代 JavaScript 应用...学习Webpack不仅包括掌握基本配置,还需要了解如何使用和编写加载器与插件,以及如何优化构建性能。通过这个简单的Webpack项目,你可以开始实践和探索这个强大的模块打包工具。

    webpack的教材和案例

    这个压缩包“webpack的教材和案例”将帮助你系统地学习Webpack,从基础配置到高级应用,逐步提升你的前端构建技能。通过深入学习和实践,你将能够熟练掌握这个强大的工具,提升项目开发的效率和质量。

    四大维度解锁Webpack3.0前端工程化

    讲述模块化开发的思想、学习环境准备,webpack 的概况,版本更迭,核心概念等,为开始实践学习webpack 做准备。 第3章 由浅入深Webpack(1) 由一个个的实例组成,介绍webpack 在处理各种实例的下的配置,实例包括 ...

    深入浅出Webpack.zip

    通过阅读《深入浅出Webpack》这本书,读者可以系统学习Webpack的基本概念、配置技巧以及实战经验,从而更好地应对复杂前端项目的构建挑战。无论你是初学者还是经验丰富的开发者,都能从中受益匪浅,为你的职业发展...

Global site tag (gtag.js) - Google Analytics