###Q1: display: inline-block 布局时, 间距消失了 A1: 在 vue-loader 15版本之前, 是不会删除元素之间空格的(至少会保留1个空格), 但是在 vue-loader 15之后, 如果你不小心这么设置了: ```javascript { test: /\.vue$/, loader: 'vue-loader', options: { compilerOptions: { preserveWhitespace: false } } } ``` 那么元素之间的空格就不保留了, 如果你需要保留一个空格, 请将`preserveWhitespace`设置成`true`, 或者干脆删除 ###Q2: ccs 压缩后, z-index 被重写 A2: webpack4 已经不支持用`extract-text-webpack-plugin`来优化 css, 需要改成`optimize-css-assets-webpack-plugin`和`mini-css-extr...

6月20号官方发布了[公告](https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b "公告"), webpack推出了3.0正式版。 作为一个版本控, 有新版本出来, 肯定是要试一试的. ### 如何升级? 1. 如果是用`yarn`, 那么升级很简单, 执行命令`yarn upgrade-interactive`, 然后选择需要升级的模块即可 2. 如果是用`npm`, 执行以下命令: ```bash npm install webpack@3.0.0 --save-dev npm install html-webpack-plugin@2.29.0 --save-dev npm install extract-text-webpack-plugin@3.0.0-beta.3 --save-dev ``` `extract-text-webpack-plugin`还是继续用现在的`2.x`, 也没有什么问题 ### webpack3 有什么新特性? ##### 1. Scope Hoisting...

# 官方预设配置 常用的有一下4个: 1. es2017 2. es2016 3. es2015 4. react ## === ES2017 === es2017 包括以下两个插件 - syntax-trailing-function-commas - transform-async-to-generator ##### syntax-trailing-function-commas 见 stage-3 ##### transform-async-to-generator 见 stage-3 ## === ES2016 === es2016 包括以下一个插件 - transform-exponentiation-operator ##### transform-exponentiation-operator 见 stage-3 ## === ES2015 === - check-es2015-constants // 检测 ES2015 常量 - transform-es2015-arrow-functions // 支持箭头函数 - transfo...

随着项目越来越多, 每个项目下`node_modules`都有几百个依赖, 关键还都是重复的, 对于只有 256G 硬盘来说, 实在是有点太浪费了, 前段时间, 受到`cooking`的启发, 发现`cooking`是可以共用依赖的, 翻其源代码, 终于知道了, 原来`webpack`一直就有这个功能, 只是以前没注意到... 首先, 创建一个放依赖的目录, 比如: `E:\web\npm` (`~\web\npm`), 在目录下创建一个`package.json`, 把经常用到的依赖全都写进去, 然后执行`npm install`或`yarn`, 这样这个文件夹就成了一个公共依赖库 再来, 就是配置`webpack`了, 在`webpack`配置文件里添加: ```javascript { resolve: { modules: [ path.join(__dirname, './node_modules'), 'E:\\web\\npm\\node_modules' ] } } ``...

升级到webpack2 打包合并 css 报` Chunk.entry was removed. Use hasRuntime()`错误, 怎么解决? 其实解决很简单, 升级webpack的`extract-text-webpack-plugin`插件即可 ```bash npm install extract-text-webpack-plugin@2.0.0-beta.3 ```...

2016.11.24 更新: css-loader@0.26.0 版本已经解决了这个问题 --- 今天在用 flex 布局的时候, 需要兼容低版本 IOS, 于是用 webpack 的 autoprefixer 做前缀兼容处理, 但是发现, 在开发环境时是好的, 但是生产环境时, 布局就出了问题, 检查 CSS 文件, 发现在生产环境下, 部分兼容性样式被删除 对比了开发环境和生产环境, 不同的地方就是开发环境用了`extract-text-webpack-plugin`做css合并, 初步怀疑就是这个造成的. 于是乎在`extract-text-webpack-plugin`, `postcss-loader`, `css-loader`的 ISSUES 各种找原因, 最终在`css-loader`中找到: > By default the css-loader minimizes the css if specified by the module system. > In some cases the minification is destructive to th...

# 安装 使用 npm 的形式来安装到全局： `$ npm install webpack -g` 个人还是推荐直接安装到项目目录下： `$ npm init` `$ npm install webpack --save-dev` # 配置 在项目根目录新建`webpack.config.js`文件, 在文件中写入: ```javascript module.exports = { //各种配置 } ``` 下面来详细说明, 上面代码中的`各种配置` ## context - 基本目录 基本目录（绝对路径）用于解决`entry`选项, 默认值: `process.cwd()` ```javascript { context: __dirname + "/app", } ``` ## entry - 入口文件 如果您传递了一个字符串：字符串将被解析为一个模块，该模块在启动时加载。 如果你通过一个数组：所有的模块都在启动时加载。最后一个是导出的。 单入口: ```javascript { entry: './src/app.js' } ``` ```javascript...

注意: 如果使用`webpack@2.1.0-beta.25`, 需要将`loader-utils`更新到最新版本(`0.2.16`) # 将resolve.root, resolve.fallback, resolve.modulesDirectories 合并成 resolve.modules 之前: ```javascript resolve: { root: path.join(__dirname, "src") } ``` 现在: ```javascript resolve: { modules: [ path.join(__dirname, "src"), "node_modules" ] } ``` # resolve.extensions 不再允许传空字符串 之前: ```javascript resolve: { extensions: ['', '.js', '.vue'] } ``` 现在 ```javascript resolve: { extensions: ['.js', '.vue'...