Atwood定律:凡是能用JavaScript写出来的,最终都会用JavaScript写出来

 

Webpack 多页面应用(多 HTML 页面 html-webpack-plugin )

Webpack 4.0 开始,为了应对 Parcel 等的挑战,配置越来越简单,甚至可以“零配置”。一个简单的 Webpack.config.js 配置文件 :const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } }; 添加上常用 loader 后的配置文件:const HtmlWebpackPlugin = r
ngtwewy 2020-05-21    Webpack   

Webpack 概念理解 module、chunk 和 bundle 的区别

Bundle: Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.Bundle: bundle通常是由多个不同的模块产生,它是已经加载完毕和被编译后的源代码的最终版本。Bundle Splitting: This process offers one way of optimizing a build, allowing webp
ngtwewy 2020-05-21    Webpack   

Webpack file-loader 升级后 src= "[object Module]" 的解决方法

Webpack file-loader 升级后 src= "[object Module]" 的解决方法,当 file-loader 的版本是 4.3.0 及以上,则需要在 webpack.config.js 中手动配置属性 esModule 。{ test: /\.(jpg|jpeg|png|gif|svg)$/, loader: "file-loader", options: { esModule: false, // 默认值是 true,需要手动改成 false } } esModuleType: Boolean Default: trueBy de
ngtwewy 2020-03-18    Webpack   

Webpack使用polyfill打包兼容低版本浏览器

使用webpack项目打包以后的项目在Chrome、Safari 下运行正常,但是在IE11下运行失败!提示 vuex requires a Promise polyfill in this browser。 一脸迷惑,原来是这样的。babel默认只转换语法,而不转换新的API,如需使用新的API,还需要使用对应的转换插件或者polyfill。例如,默认情况下babel可以将箭头函数,class等语法转换为ES5兼容的形式,但是却不能转换Map,Set,Promise等新的全局对象,这时候就需要使用polyfill去模拟这些新特性 babel-polyfill 原理是当运行环境中并没
ngtwewy 2018-09-10    Webpack   

babel-preset-env 一个就够了

Babel 的官网上在2017年9月宣布 ES2015 / ES2016/ ES2017 等等 ES20xx 时代的 presets 通通被废弃(deprecated),取而代之的是 babel-preset-env,并且承诺它将成为“未来不会过时的(future-proof)”解决方案。 babel-preset-env 是一个新的 preset,可以根据配置的目标运行环境(environment)自动启用需要的 babel 插件。 目前我们写 javascript 代码时,需要使用 N 个 preset,比如:babel-preset-es2015、ba
ngtwewy 2018-09-10    Webpack   

Webpack 使用 HtmlWebpackPlugin 简化了HTML文件的创建

为什么使用 HtmlWebpackPlugin 使用webpack命令打包,默认是不能生成html文件的,我以前的解决方法,就是在webpack output的目录中,添加一个index.html文件,index.html文件的内容如下:   首页 当webpack目标文件夹变化的时候,还要把这个文件也复制过去,麻烦。 为了解决此问题,可以使用webpack插件:html-webpack-plugin。 HtmlWebpackPlugin 使用方法 安装 npm install --save-dev html-webpack-plugin 然后webpack
ngtwewy 2018-09-08    Webpack   

Webpack的项目中,如何import导入绝对路径

在写vue或者react中,有时候目录过深。使用相对路径引入模块,有点容易出错。比如下面这样: import {tools} from "../../../../../tools"; 在webpack.config.js 中,配置如下: resolve: { alias: { '@': require('path').resolve(__dirname, 'src') } }, 然后就可以在项目中使用绝对路径了。 import {tools} from "@/tools";
ngtwewy 2018-05-15    Webpack   

vue+webpack 升级后在原有项目上的适配问题

本人的项目是 vue + webpack,vue单文件中使用了 Jade 模板与 less 预编译器 起因是因为谈论到 Jade 模板问题,Jade 早已改名为 Pug,并且发布了2.0版本,想着不如升级了吧,顺便把 webpack 与 vue 也一并升级了,事实证明,升级需谨慎 = = 首先之前的版本如下: "vue": "2.4.2" "webpack": "2.7.0" 升级后的版本为: "vue": "2.5.7" "webpack": "3.8.1" 运行 npm update ,一切正常,然而运行 vue 项目就开始报错了 /
ngtwewy 2017-12-20    Webpack   

webpack使用vue与cordova

生成app,cordova下的www文件才是最重要的,但是这个文件夹是更难于改。 最简单的方案是,webpack的项目,webpack命令输出静态文件以后,直接复制到cordova的www文件夹下。 这样直接一个spa的应用就可以打包成一个apk文件。 如果,在写spa的时候,就引用cordova.js, 肯定各种undefined。 暂时发现两种方案: 1, 直接修改代码的方法,就如文章开头介绍的。下面有篇文章做参考。 http://www.jianshu.com/p/25d797b983cd 2,第二种方法是,是使用vue-cordova插件。 https://github
ngtwewy 2017-10-22    Webpack   

webpack报错:Cannot assign to read only property 'exports' of object

这个倒霉错误在mac电脑上开发的时候非常顺利,可是用windows的时候就会报错。 百度查不到,google一查果然有。 原因是:The code above is ok. You can mix require and export. You can‘t mix import and module.exports. 也就是说,在webpack打包的时候,可以在js文件中混用require和export。但是不能混用import 以及module.exports。 于是查了一下代码,在自己的main.js中有这一段代码: impor
ngtwewy 2017-04-11    Webpack   

webpack-dev-server 无法通过ip访问

webpack-dev-server --port 3000 --hot would allow the server to be accessed at: http://localhost:3000 and http://10.0.1.4:3000 (my local IP). In 1.8.0 accessing http://10.0.1.4:3000 no longer works. Not sure if this has to do with webpack-dev-server or one of the dependencies.
ngtwewy 2017-04-11    Webpack   

简单的webpack配置文件

package.json { "name":"test", "version":"1.0.0", "description":"nodescription2017", "main":"index.js", "scripts":{ "test":"run" }, "keywords":[ "none" ], "author":"lee", "license":"ISC", "devDependencies":{ "babel-core":"^6.23.1", "babel-loader":"^6.3.2", "babel-preset-es2015":"^6.
ngtwewy 2017-03-02    Webpack   

入门 Webpack,看这篇就够了

写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失;如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走进了Webpack的大门。 //一个常见的Webpack配置文件 varwebpack=require('webpack'); varHtmlWebpackPlugin=req
ngtwewy 2017-02-27    Webpack