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
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]" 的解决方法，当 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项目打包以后的项目在Chrome、Safari 下运行正常，但是在IE11下运行失败！提示 vuex requires a Promise polyfill in this browser。
一脸迷惑，原来是这样的。babel默认只转换语法,而不转换新的API,如需使用新的API,还需要使用对应的转换插件或者polyfill。例如，默认情况下babel可以将箭头函数，class等语法转换为ES5兼容的形式，但是却不能转换Map，Set，Promise等新的全局对象，这时候就需要使用polyfill去模拟这些新特性
babel-polyfill
原理是当运行环境中并没
为什么使用 HtmlWebpackPlugin
使用webpack命令打包，默认是不能生成html文件的，我以前的解决方法，就是在webpack output的目录中，添加一个index.html文件，index.html文件的内容如下：
!DOCTYPE html
html lang="zh-cn"
head
title 首页 /title
meta charset="utf-8"
meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"
在写vue或者react中，有时候目录过深。使用相对路径引入模块，有点容易出错。比如下面这样：
import {tools} from "../../../../../tools";
在webpack.config.js 中，配置如下：
resolve: {
alias: {
'@': require('path').resolve(__dirname, 'src')
}
},
然后就可以在项目中使用绝对路径了。
import {tools} from "@/tools";
本人的项目是 vue + webpack，vue单文件中使用了 Jade 模板与 less 预编译器
起因是因为谈论到 Jade 模板问题，Jade 早已改名为 Pug，并且发布了2.0版本，想着不如升级了吧，顺便把 webpack 与 vue 也一并升级了，事实证明，升级需谨慎 = =
首先之前的版本如下：
"vue": "2.4.2"
"webpack": "2.7.0"
升级后的版本为：
"vue": "2.5.7"
&
package.json
{
"name": "test",
"version": "1.0.0",
"description": "no description 2017",
"main": "index.js",
"scripts": {
"test": "run"
},
"keywords": [