全部文章
JavaScript
CSS
Vue.js
npm
Node.js
Webpack
Apache
PHP
MySQL
App开发
HTTP
RESTful API
Git
数据结构和算法
正则表达式
Windows
CentOS
macOS
微信支付宝
FFmpeg
UI 设计
PS 手绘
Adobe 全家桶
大杂烩
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
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
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
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
原理是当运行环境中并没
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
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
Webpack的项目中，如何import导入绝对路径
在写vue或者react中，有时候目录过深。使用相对路径引入模块，有点容易出错。比如下面这样：
import {tools} from "../../../../../tools";
在webpack.config.js 中，配置如下：
resolve: {
alias: {
'@': require('path').resolve(__dirname, 'src')
}
},
然后就可以在项目中使用绝对路径了。
import {tools} from "@/tools";
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 项目就开始报错了
/
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
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
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.
简单的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.
入门 Webpack，看这篇就够了
写在前面的话
阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，而你又你对webpack感兴趣，那么动手跟着本文中那个贯穿始终的例子写一次，写完以后你会发现你已明明白白的走进了Webpack的大门。
//一个常见的Webpack配置文件
varwebpack=require('webpack');
varHtmlWebpackPlugin=req
