ngtwewy

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

2020-05-21    Webpack   
ngtwewy

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

2020-05-21    Webpack   
ngtwewy

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

2020-03-18    Webpack   
ngtwewy

使用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 原理是当运行环境中并没

2018-09-10    Webpack   
ngtwewy

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

2018-09-10    Webpack   
ngtwewy

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

2018-09-08    Webpack   
ngtwewy

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

2018-05-15    Webpack   
ngtwewy

本人的项目是 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 项目就开始报错了 /

2017-12-20    Webpack   
ngtwewy

生成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

2017-10-22    Webpack   
ngtwewy

这个倒霉错误在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

2017-04-11    Webpack   
ngtwewy

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.

2017-04-11    Webpack   
ngtwewy

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.

2017-03-02    Webpack   
ngtwewy

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

2017-02-27    Webpack   
随机推荐
browser-sync 浏览器自动刷新
EJS 中文文档
jQuery Mobile 1.4.5实现类似微信的弹出提示
PHP 获取父分类和子分类常用递归函数
DDOS 专题
Quill.js富文本编辑器,初始化和自定义图片上传
filezilla server FTP 安装报错 "could not load TLS network. Aborting start of administration interface"
php防sql注入
使用ffmpeg推流视频文件
You Don't Need jQuery