Wang的专栏

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。查看详情1 、 查

针对这一问题，不同版本的webpack 处理方式不同最直接的解决方案：https://stackoverflow.com/questions/29576341/what-does-the-code-generator-has-deoptimised-the-styling-of-some-file-as-it-e针对 webpack 3.8.1 版本的处理方式// Process ...

一个产品的上线往往会有很多的问题，现在就出现一个需求，我们是在服务器下的某个目录进行发布，而不是根服务器，服务端不想为一个项目配置ip地址，而在react项目中,默认是走的根路径，现在我们就开始修改一下它。前提说明如果我们需要修改手动配置webpack, 那么根据现在的版本, 我们只能执行 npm run eject, 之后就可以着手修改了。webpack中与需求相关的...

在项目中，如果我们的路径结构很复杂，那么我们可能导入其他模块的时候不是很方便，这时候，我们可以配置webpack以配置别名的形式访问执行eject在项目中执行 $ npm run eject 这个命令只能执行一次，而且不可逆转，它会把react-scripts 封装的一些webpack配置等全部解压到项目目录，项目结构中会多出 config 目录 和 scripts 目录，我们...

Bower 是一款前端包管理器，目前还在维护中，但推荐使用npm和yarn的生态。 官方通告： …psst! While Bower is maintained, we recommend using Yarn and Webpack for front-end projects read how to migrate! 项目中常用npm和bower配合使用，b...

相比较于gulp， Grunt的配置起来较为麻烦，不过也是一个很好的构建工具，社区也很大，周边的插件也很全面，下面我们用官网上的一个小例子来分析一下它网站官网中文网安装全局安装 grunt-cli：$ sudo cnpm i -g grunt-cli 全局安装 grunt：$ sudo cnpm i -g grunt 项目依赖安装：$ sudo cnpm i...

今天经过长时间的尝试和搜索，设置是切换各种镜像源的尝试，都无法正常安装，目前已找到解决方法了，一开始网上并没有确切的答案，但是经过不断的试错，终于找到了问题的源头，现在分享下，避免以后其他人走太多弯路。发现问题info There appears to be trouble with your network connection. Retrying...info The...

相关说明 在构建任务中，我们有想要根据bower.json中的文件来实现动态引入到项目中的需求，main-bower-files这款插件可以帮我们很好的支持bower组件的动态引入引入插件var gulp = require('gulp'), bowerFiles = require('main-bower-files'), // bower相关文件处理 ...

fis 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。目前版本为F.I.S 3 快速查看fis官网fis 安装$ sudo npm install -g fis3备注：sudo在linux和mac系统上使用fis相关解决方案fis-plus ：...

Yeoman 是一项伟大的工程，使用Yeoman可快速生成一个web应用，它可以为开发者省去不少的开发时间，是前端项目开发的脚手架工程。快速查看官网Yeoman的安装$ sudo npm install -g yo $ sudo npm install -g generator-webapp备注：sudo 在mac或linux系统使用Yeoman 的三大工具y...

需求描述：启动一个gulp任务，打开本地默认浏览器需要的相关依赖$ npm i -g gulp$ npm i --save-dev gulp process shelljs关键代码gulp.task('open-browser', function () { var platform = process.platform; var shellSt

跨域处理很麻烦，特别是针对低版本的IE，并且即使做了相关处理，还可能存在安全问题。在开发阶段，我们在不使用工具的情况下以及现代浏览器的环境下，jsonp是一个很好的方式，但是jsonp只能针对get方式的请求，并不完美，这里我们完全可以利用gulp组件进行api的转发处理，以期在开发阶段简单搞定问题。重要的两款插件介绍gulp-connecthttp-proxy-middleware安装依赖

什么是BrowsersyncBrowsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。有了它，您不用在多个浏览器、多个设备间来回切换，频繁的刷新页面。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中，这一切还可以通过可视化界面来控制。

gulp 是基于node 的一个构建工具 , 所谓构建工具是指通过简单配置就可以帮我们实现合并、压缩、校验、预处理等一系列任务的软件工具。常见的构建工具包括：Grunt、Gulp、Webpack 以及百度的F.I.S下面我们来说下gulp ， gulp 提供插件的机制 ，不会产生臃肿 ， 如果有需要再装上相应的插件就可以了。比如这个autoprefixer包，用于css自动添加前缀，其实，gulp

在上线的时候和调试时候的区别不是很大，只需要修改下一些配置文件和一些优化处理。处理webpack.deploy.config.js首先将webpack.develop.config.js中的文件拷贝过来头部引入webpack const webpack=require("webpack") 修改module.exports对象上的entry为： { app:path.resolve(

webpack-dev-server webpack-dev-server 在webpack 官网上的 develop tools 获取，用于监听文件变化，实现时时打包，时时刷新功能。作为项目依赖安装： $ npm i --save-dev webpack-dev-server依照上篇博客修改package.json文件中的scripts "develop": "webpack-dev-ser

在 windows 打包直接报错信息Failed to compile../node_modules/@antv/data-set/build/data-set.jsModule build failed: ReferenceError: Unknown plugin "transform-remove-strict-mode" specified in "d:\\work\\..\\nod...