![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Webpack
webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transform)、打包(bundle)
I-T枭
这个作者很懒,什么都没留下…
展开
-
在 Create React App 中启用 Sass 和 Less
本文介绍了如何在 Create React App 脚手架中启用 Sass 和 Less。前言关于创建 create-react-app 项目请查看: create-react-app 的安装与创建。关于在 less 和 sass 如何在 create-react-app 启用 CSS Modules,请查看我的上一篇文章:在 Create React App 中使用 CSS Modu...原创 2019-10-10 10:28:48 · 118 阅读 · 0 评论 -
nodejs在Mac下的卸载
卸载: 在 node 官网上下载的安装包,用安装包安装的node.应该可以用一下命令行卸载: 在终端输入以下命令: sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*} 删除/usr/local/lib中的所有node和node_modules ...原创 2018-12-18 23:12:35 · 355 阅读 · 0 评论 -
npm Scripts打包
Why npm Scripts?原文发表于 2016.2.12,原文地址: https://css-tricks.com/why-npm-scripts/以下是访客Damon Bauer发布的一篇文章。近来直接使用node package提供的命令行界面的情绪持续高涨,反之,人们对通过运行任务从而屏蔽抽象功能的热情逐渐降温。在一定程度是,你无论如何都要使用npm,而同时npm提供了脚本功能,为什么...转载 2018-05-11 12:06:36 · 814 阅读 · 0 评论 -
npm scripts 使用指南
Node 开发离不开 npm,而脚本功能是 npm 最强大、最常用的功能之一。本文介绍如何使用 npm 脚本(npm scripts)。一、什么是 npm 脚本?npm 允许在package.json文件里面,使用scripts字段定义脚本命令。{ // ... "scripts": { "build": "node build.js" }}上面代码是package.js...转载 2018-06-07 11:59:36 · 196 阅读 · 0 评论 -
dotenv-cli
dotenv-cli2019-03-27dotenv-cli是什么什么是dotenv-cli,A global executable to run applications with the ENV variables loaded by dotenvdotenv-cli官网:官网 dotenv-cli源码仓库:源码仓库 dotenv-cli下载地址:点此下载点此下载2dot...原创 2020-01-14 12:24:41 · 2518 阅读 · 2 评论 -
vue-cli使用vscode编辑器如何自动eslint检测
1:忽略不检测文件解决方法:在压缩代码前后加上/* eslint-disable */,生效原创 2020-09-18 15:40:29 · 1001 阅读 · 0 评论 -
webpack 构建多页面应用——初探
如何使用webpack构建多页面应用,这是一个我一直在想和解决的问题。网上也给出了很多的例子,很多想法。猛一看,觉得有那么点儿意思,但仔细看也就那样。使用webpack这个构建工具,可以使我们少考虑很多的问题。我们常见的单页面应用只有一个页面,它考虑问题,解决问题围绕着中心化去解决,因此很多麻烦都迎刃而解。如果你使用过vue.js,那么想必你一定用过vue-router,vuex,它们就是典型的中心化管理模式,当然还有很多,这里不一一列举了。而多页面应用,我们不能再按照中心化模式的路走了,因为行转载 2020-06-01 15:07:07 · 325 阅读 · 0 评论 -
webpack配置postcss-loader无效
webpack配置postcss-loader无效文档配置如下:postcss.config.jsmodule.exports = { plugins: [ require('autoprefixer') ]}webpack.config.jsconst path = require('path');const webpack = require('webpack');const { CleanWebpackPlugin } = require(原创 2020-05-31 23:20:12 · 3003 阅读 · 1 评论 -
解决PostCSS配置
webpack.config.js:const path = require('path');var HtmlWebpackPlugin = require('html-webpack-plugin');const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = { entry:...原创 2020-01-17 09:35:28 · 1555 阅读 · 0 评论 -
webpack中imports-loader,exports-loader,expose-loader的区别
Webpack有几个和模块化相关的loader,imports-loader,exports-loader,expose-loader,比较容易混淆。今天,我们来理一理。imports-loaders文档介绍的是:用于向一个模块的作用域内注入变量(Can be used to inject variables into the scope of a module.),官方的文档总是言简意赅...原创 2020-01-16 14:08:51 · 656 阅读 · 0 评论 -
webpack中html-webpack-plugin中的模版文件失效
html-webpack-plugin可以用html作为模版文件,但是这会和全局配置的html-loader冲突造成无法用ejs语法嵌入图片。var path = require("path");var HtmlWebpackPlugin = require('html-webpack-plugin');const { CleanWebpackPlugin } = require('cl...原创 2020-01-16 11:18:42 · 1650 阅读 · 0 评论 -
webpack打包html里面img后src为“[object Module]”问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat...转载 2020-01-01 23:01:25 · 2528 阅读 · 4 评论 -
webpack(create-react-app=>dotenv.cli)针对不同环境使用不用接口地址的适配问题
项目中使用了create-react-app搭建的项目,package.json中用的react-app-rewired方式,由于webpack没有被释放,不能在webpack的配置文件直接配置适配,所以针对build 的dev,test, production环境取不同的接口地址,就不是很方便。(create-react-app默认情况下,webpack的配置是对dev ,productio...原创 2019-12-27 10:59:52 · 1960 阅读 · 1 评论 -
create-react-app本地配置域名启动
修改hosts路径:C:\Windows\System32\drivers\etc127.0.0.1 wojia1.ehouse2.com在webpack中加入域名 // always allow localhost host, for convience // if (hostname === 'localhost') return true; if(hostn...原创 2019-12-09 09:35:00 · 1439 阅读 · 0 评论 -
什么时候create-react-app会混淆或缩小代码?
React在构建期间缩小代码并生成源映射。JS最终被认为是缩小产品的副产品,而不是因为保密。这样,最终用户能够比不缩小脚本更快地加载脚本,并且当您(或他们)打开开发人员工具时,您(以及其他所有人)可以浏览原始代码。如果您build/static/js在构建后查看目录,则有成对.js和.map文件。JS文件随您的网站一起加载,并且.map在打开Developer Tools时按需加载文件。...原创 2019-11-04 17:39:43 · 2529 阅读 · 0 评论 -
vue 给UI库添加按需加载时启动项目时 babel-preset-es2015 报错
项目使用vue cli3脚手架工具构建按照element 官方文档中所示。npm install babel-plugin-component -D然后添加.babelrc文件{ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { ...原创 2019-10-30 12:03:30 · 12536 阅读 · 12 评论 -
使用npx(creact-react-app) 构建项目后-npm start启动报错
使用create-react-app创建的React项目时,有时在安装完其他组件后,再次运行 npm start 命令时会报以上错误,让我很郁闷,不过在上网搜了这个错后原来:是create-react-app有丢包的缺陷,手动安装包后,需要重新npm install一下,这样node_modules/.bin/目录下才会重新出现react-scripts的文件,这样npm start命令才...原创 2019-10-24 14:27:51 · 1981 阅读 · 0 评论 -
create-react-app使用sass,scss语法
使用create-react-app(新版)安装完项目之后。1.执行npm install sass-loader node-sass --save-dev安装sass这两个相关的插件。2.写一个scss文件.userStTitle{ background: red; p{ font-size: 12px; span{ ...原创 2019-10-23 18:18:56 · 6456 阅读 · 0 评论 -
webpack从零开始第1课:安装webpack和webpack-dev-server
立即登录webpack从零开始第1课:安装webpack和webpack-dev-server webpack-dev-server webpack advance100 2017年12月22日发布赞 | 2收藏 | 352.5k 次浏览webpack目录第1课: 安装webpack和webpack-dev-server第2课: 配置文件第3课: 做为node的一个模块来使用第4课: ...转载 2018-05-19 15:41:22 · 722 阅读 · 0 评论 -
webpack-dev-server开启服务监测js、HTML、CSS并自动刷新网页的套路详细步骤并附代码
webpack-dev-server开启服务监测js、HTML、CSS并自动刷新网页的套路详细步骤并附代码 砖用冰西瓜 关注2017.05.21 10:39* 字数 798 阅读 1673评论 3喜欢 0在一个合适的文件夹下npm初始化npm init安装webpackcnpm install webpack --save-dev创建webpack.config.js文件,也可以鼠标右键创建(...转载 2018-05-19 19:07:43 · 3336 阅读 · 1 评论 -
React项目的打包与部署到腾讯云
腾讯云送了30天的免费试用,于是有了把react项目部署到上面的想法。项目是默认生成的,只是一个页面,但是这个过程中也遇到了不少麻烦与问题。下面来具体梳理下:create-react-app 来自Facebook官方的零配置命令行工具。create-react-app是来自于Facebook出品的零配置命令行工具,能够帮你自动创建基于Webpack+ES6的最简易的React项目模板,有助于初学者...转载 2018-05-28 16:35:36 · 459 阅读 · 0 评论 -
初始化vue项目,报错This is probably not a problem with npm,there is likely additional logging output above
初始化vue项目,报错This is probably not a problem with npm,there is likely additional logging output above2018年01月09日 18:03:00阅读数:13504版本更新 初始化项目,vue init webpack-simple demo 然后npm install 再然后npm run dev 就报错了...转载 2018-05-23 22:42:40 · 9918 阅读 · 0 评论 -
babel-plugin-import配置babel按需引入antd模块,编译后报错.bezierEasingMixin()
用create-react-app做项目的时候,同时引入了antd,为了实现按需加载antd模块,用到他们提供的babel-plugin-import( 一个用于按需加载组件代码和样式的 babel 插件)虽然项目一开始是用create-react-app创建,但是之后有 yarn run eject,将所有内建的配置暴露出来,这样可以自由重新配置webpack,至于为什么要这...转载 2019-10-10 17:30:32 · 1053 阅读 · 0 评论 -
webpack+ES6+less开发环境搭建(附带视频教程)
阅读数:9274webpack是什么https://cnodejs.org/topic/571f4e785a26c4a841ecbd7cWebpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。百度网盘视频下载:http://pan.baidu.com/s/1jIPJucu百度网盘在线观看:http://pan.baidu.com/sha...转载 2018-05-12 01:03:04 · 900 阅读 · 0 评论