![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
幸福了,然后呢
老老实实,努力挣钱~~
展开
-
webpack配置本地服务器webpack-dev-server
webpack配置本地服务器今天学习了webpack的本地服务器的配置,配置还是简单好学的,在这过程中由于自己的粗心大意写错了一个单词导致了报错,找了好久才发现问题,忘小伙伴们敲代码的过程中一定要仔细,千万不要向我一样,耽误了不少时间(哭泣~~)。开始记录新的学习知识吧,走起 ——>第一步安装webpack-dev-server我使用的安装命令是:yarn add webpack...原创 2019-06-18 20:54:56 · 1262 阅读 · 0 评论 -
Tapable(一)
Tapable Webpack本质上是一种事件流的机制,它的工作流程就是将各个插件串联起来,而实现这一切的核心就是Tapable。 Tapable 是一个小型的库,允许你对一个 javascript 模块添加和应用插件。它可以被继承或混入到其他模块中。类似于 NodeJS 的 EventEmitter 类,专注于自定义事件的触发和处理。除此之外,Tapable 还允许你通过回调函数的参数...原创 2019-09-17 13:43:52 · 1065 阅读 · 1 评论 -
webpack不同环境的配置
webpack不同环境的配置 在我们开发项目时,一般会有开发环境与生产环境,不同环境对应不同的url地址或者一些其他配置,这时候,我们就需要不同的config配置文件相结合的形式来完成配置需求。首先我们可以先建立3个不同的配置文件,分为webpack.base.config.js(配置基础内容),webpack.dev.config.js(配置开发相关内容)和webpack.prod.c...原创 2019-09-10 13:57:24 · 545 阅读 · 0 评论 -
webpack报错CleanWebpackPlugin is not a constructor
CleanWebpackPlugin is not a constructor安装clean-webpack-plugin插件yarn add clean-webpack-plugin -Dwebpack.config.js配置:let HtmlWebpackPlugin = require('html-webpack-plugin') //html插件let Clean...原创 2019-09-06 10:46:33 · 865 阅读 · 0 评论 -
配置source-map
配置source-mapsourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术。我们的开发i代码通常都会被编译压缩,若原始代码中出现错误,那么很难找到错误所在位置,使用source-map就会使我们很快定位到错误在原代码的位置。安装yarn add @babel/core @babel/preset-env babel/loader webp...原创 2019-09-09 09:45:41 · 1787 阅读 · 0 评论 -
配置webpack— js处理
配置webpack — js处理一、转化es6语法安装babelyarn add babel-loader @babel/core @babel/preset-env -D配置webpack.config.js文件: module:{ // 模块 rules:[ { test:/\.js$/, ...原创 2019-09-05 10:11:38 · 90 阅读 · 0 评论 -
webpack样式处理 — css插件
webpack样式处理 — css插件一、 处理css文件有了html文件后,我们想给页面增加一些css样式,此时我们就需要在js文件中引入我们需要的css文件:require('./index.css')运行npm run dev,此时因为js里无法解析css文件所以会报错:解决方法:先安装css插件:yarn add css-loader style-loader -D...原创 2019-09-03 16:02:54 · 963 阅读 · 0 评论 -
配置基础webpack.config.js文件
配置webpack.config.js文件(1)webpack.config.js:// webpack 是node写出来的 node的写法let path = require('path');let HtmlWebpackPlugin = require('html-webpack-plugin') //html插件module.exports = { devServ...原创 2019-09-03 10:49:16 · 201 阅读 · 0 评论 -
webpack搭建react项目,箭头函数报错:Unexpected token
webpack搭建react项目,箭头函数报错:Unexpected token今天在webpack搭建的react项目中,写了一个小demo,想要使用箭头函数,但是运行报错,解决方法如下:报错解决办法我的 .babelrc 文件内容{ "presets": ["react", "es2015"], "plugins": [["import", { "libraryName": ...原创 2019-07-01 16:59:21 · 1876 阅读 · 0 评论 -
手动配置一个简单的webpack
手动配置一个简单的webpack出现的问题项目搭建流程敲黑板啦!!!这是作为一个程序员进阶路上的小白,第一次写博客,值得纪念、值得恭喜~~呱唧呱唧。言归正传,最近在学习webpack,刚刚入门学习就遇见各种各样的问题,在我的不懈努力下,终于是解决啦!现在此记录一下,以备后续参考。倘若哪位小伙伴有缘看到本人的这篇笔记,欢迎大家指出问题,若有更好的建议或方法也可以备注留言,大家一起进步,一起ha...原创 2019-06-14 13:15:48 · 284 阅读 · 0 评论 -
webpack简单html插件--plugins
webpack–html插件第一步安装html-webpack-plugin: yarn add html-webpack-plugin -D第二步webpack.config.js文件中增加配置语句第三步src文件夹下创建一个index.html文件第四步继续完成 webpack.config.js文件中的配置配置完成后,使用npm run dev打包查...原创 2019-06-18 21:36:47 · 226 阅读 · 0 评论 -
Tapable(二)
Tapable(二)示意图(引用):安装tapable:yarn add tapable异步钩子类通过 tapAsync 或 tapPromise 来监听函数,通过 callAsync 或 promise来发布订阅的。(凡有异步,必有回调)异步并行 (Parallel)– AsyncParallelHook– AsyncParalleBailHook异步串行 (Series...原创 2019-09-24 11:23:13 · 226 阅读 · 0 评论