webpack踩坑之路

webpack+babel常用包和插件

没有设置repository和description

npm WARN demo@1.0.0 No description 
npm WARN demo@1.0.0 No repository field.

会有两个warn，就是说没有repository和description，也就是说缺少项目的基本描述文件和仓库字段，一般团队合作时会用到，比如git仓库和readme，设置了就不会有警报了，当然也可以在package.json中添加"private": true选项表示这是私人的，这样也不会有警报

另外两个warn

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} 
(current: {"os":"win32","arch":"x64"})

这是因为这个fsevents依赖是个可选的依赖包，只有项目运行环境是mac OS时才会使用，所以在windows和linux下会报这个warn，无关紧要。

It occurs because fsevents is an optional dependency, used only when project is run on macOS environment (the package provides 'Native Access to Mac OS-X FSEvents').
And since you're running your project on Windows, fsevents is skipped as irrelevant.

没有设置mode

WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. 
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

没有指明模式，只需要在package.json文件的scripts选项下的命令后加上--mode development或者--mode production来指明是开发环境还是生产环境就行

extract-text-webpack-plugin插件不支持webpack4

DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

需要用最新版的（Beta测试版）的extract-text-webpack-plugin，在后面加上@next即可，即npm install extract-text-webpack-plugin@next

babel-preset-es2015逐渐被废弃，不建议使用

Babel now has a better preset that we recommend you use instead: npm install babel-preset-env --save-dev

换用babel-preset-env就行，注意env后面不要加@next，否则会安装Beta7.0的版本，这样的话就会导致babel版本不一样，会报错：

TypeError: Cannot read property 'loose' of undefined

从babel-preset-es2015迁移到babel-preset-env也很方便，只需要把原先的babel-preset-es2015uninstall掉再装上babel-preset-env，再把.babelrc文件中的"presets":["es2015"]改成"presets":["env"]就行

vue-loaderv15.0+版本的问题

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

在15.0+版本的vue-loader中，会报上面的错误，即15.0以上版本的vue-loader需要一个插件，解决方法是把vue-loader换成15.0版本以下的或者装上插件，也很简单，在webpack.config.js中添加插件：

var VueLoaderPlugin = require('vue-loader/lib/plugin');

//...
plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin()
    // ...
]
//...

webpack4中废弃了webpack.optimize.UglifyJsPlugin

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

这是因为在生产环境打包时，压缩js时用到了

new webpack.optimize.UglifyJsPlugin({
    compress:{  
       warnings:false
    }
})

但是在webpack4中，废弃了之前的webpack.optimize.UglifyJsPlugin的用法，所以会报上面的错误。解决方法是：

1. 用npm安装uglifyjs-webpack-plugin插件，npm install --save-dev uglifyjs-webpack-plugin
2. 将其引入：let UglifyJsPlugin=require('uglifyjs-webpack-plugin')
3. 删除以前的写法，将optimization选项与plugins选项并排写在一起，注意，是并排，而不是像以前一样写在plugins里面。

let UglifyJsPlugin = require('uglifyjs-webpack-plugin');

//...
plugins:[
    //...
],
optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: false,
        }
      })
    ]
}
//...

注意optimization选项不要写到plugins选项里面

Refused to apply style from 'http://localhost:8080/dist/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

webpack和webpack-dev-server的区别

1. webpack只是构建项目，webpack-dev-server除了构建项目还提供web服务，即给本地开发提供了一个服务器（一个小型的Node.js Express服务器）。
2. webpack.config.js的路径参数：entry都是一样的，即需要知道要构建打包的文件在哪里，区别在于output,webpack打包之后会将输出文件放于output指定的路径，是真是的物理地址，而webpack-dev-server则是将输出文件放在内存中，仅供开发时使用，一旦关闭服务器打包之后的文件就会消失。

从上面可以看出，webpack-dev-server用于开发环境下，修改后内存中的文件可以动态更新，而webpack用于生产环境下，修改之后想要更新必须重新构建。

Webpack——解决疑惑,让你明白

package.json和package-lock.json的区别

在配置了babel+webpack的环境之后，无法使用展开/收集云算法（就是...运算符），会报错Unexpected token，这是因为没有指明ES6的stage,...运算符是stage-4的语法，需要在.babelrc文件中进行preset配置：

"presets": [
    // ...
    "stage-2"
    // ...
],

指明一个小于等于stage-4的stage，同时需要本地安装对应的stage包，如npm install --save-dev babel-preset-stage-2，否则会报错

Error: Couldn't find preset "stage-2" relative to directory ...

对于stage，详细说明如下：

preset stage-0其实包含了stage-[1-3]，装了0，其他三个默认就装了，不需要重复安装，因为它包含stage-1，stage-2以及stage-3的所有功能。另外，[0-3]是代表了不同阶段，但0是代表刚开始讨论，而3是代表快要成为标准规范了，切忌搞混。在进行实际开发时，可以更具需要来设置对应的stage。如果省事懒得折腾，一般设置为stage-0即可。如果为了防止开发人员使用某些太新的功能，我们可以限制到某个特定的stage。更详细、更专业一点的介绍如下：

stage3包含以下两个插件：

• transform-async-to-generator
• transform-exponentiation-operator

stage2包含stage3的所有插件，额外还有以下插件：

• syntax-trailing-function-commas
• transform-object-reset-spread

stage1包含stage2所有插件，额外还有以下插件：

• transform-class-constructor-call (Deprecated)
• transform-class-properties
• transform-decorators – disabled pending proposal update
• transform-export-extensions

stage0包含stage1所有插件，额外还有以下插件：

• transform-do-expressions
• transform-function-bind