webpack+babel常用包和插件

沒有設(shè)置repository和description

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

會(huì)有兩個(gè)warn穿剖，就是說沒有repository和description听隐，也就是說缺少項(xiàng)目的基本描述文件和倉庫字段，一般團(tuán)隊(duì)合作時(shí)會(huì)用到苛茂，比如git倉庫和readme菜职，設(shè)置了就不會(huì)有警報(bào)了肴盏，當(dāng)然也可以在package.json中添加"private": true選項(xiàng)表示這是私人的燕鸽，這樣也不會(huì)有警報(bào)

另外兩個(gè)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"})

這是因?yàn)檫@個(gè)fsevents依賴是個(gè)可選的依賴包闪彼，只有項(xiàng)目運(yùn)行環(huán)境是mac OS時(shí)才會(huì)使用婿滓，所以在windows和linux下會(huì)報(bào)這個(gè)warn老速，無關(guān)緊要。

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.

沒有設(shè)置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選項(xiàng)下的命令后加上--mode development或者--mode production來指明是開發(fā)環(huán)境還是生產(chǎn)環(huán)境就行

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

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

需要用最新版的（Beta測(cè)試版）的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，否則會(huì)安裝Beta7.0的版本嗡官，這樣的話就會(huì)導(dǎo)致babel版本不一樣箭窜，會(huì)報(bào)錯(cuò)：

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中磺樱，會(huì)報(bào)上面的錯(cuò)誤，即15.0以上版本的vue-loader需要一個(gè)插件婆咸，解決方法是把vue-loader換成15.0版本以下的或者裝上插件竹捉，也很簡(jiǎn)單，在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.

這是因?yàn)樵谏a(chǎn)環(huán)境打包時(shí)擅耽，壓縮js時(shí)用到了

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

但是在webpack4中，廢棄了之前的webpack.optimize.UglifyJsPlugin的用法物遇，所以會(huì)報(bào)上面的錯(cuò)誤。解決方法是：

1. 用npm安裝uglifyjs-webpack-plugin插件，npm install --save-dev uglifyjs-webpack-plugin
2. 將其引入：let UglifyJsPlugin=require('uglifyjs-webpack-plugin')
3. 刪除以前的寫法闸餐，將optimization選項(xiàng)與plugins選項(xiàng)并排寫在一起闸迷，注意，是并排班巩，而不是像以前一樣寫在plugins里面。

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

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

注意optimization選項(xiàng)不要寫到plugins選項(xiàng)里面

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的區(qū)別

1. webpack只是構(gòu)建項(xiàng)目，webpack-dev-server除了構(gòu)建項(xiàng)目還提供web服務(wù)训裆，即給本地開發(fā)提供了一個(gè)服務(wù)器（一個(gè)小型的Node.js Express服務(wù)器）。
2. webpack.config.js的路徑參數(shù)：entry都是一樣的蜀铲，即需要知道要構(gòu)建打包的文件在哪里边琉，區(qū)別在于output,webpack打包之后會(huì)將輸出文件放于output指定的路徑，是真是的物理地址记劝，而webpack-dev-server則是將輸出文件放在內(nèi)存中变姨，僅供開發(fā)時(shí)使用，一旦關(guān)閉服務(wù)器打包之后的文件就會(huì)消失厌丑。

從上面可以看出定欧，webpack-dev-server用于開發(fā)環(huán)境下，修改后內(nèi)存中的文件可以動(dòng)態(tài)更新怒竿，而webpack用于生產(chǎn)環(huán)境下砍鸠，修改之后想要更新必須重新構(gòu)建。

Webpack——解決疑惑,讓你明白

package.json和package-lock.json的區(qū)別

在配置了babel+webpack的環(huán)境之后耕驰，無法使用展開/收集云算法（就是...運(yùn)算符）爷辱，會(huì)報(bào)錯(cuò)Unexpected token，這是因?yàn)闆]有指明ES6的stage,...運(yùn)算符是stage-4的語法耍属，需要在.babelrc文件中進(jìn)行preset配置：

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

指明一個(gè)小于等于stage-4的stage托嚣，同時(shí)需要本地安裝對(duì)應(yīng)的stage包，如npm install --save-dev babel-preset-stage-2厚骗，否則會(huì)報(bào)錯(cuò)

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

對(duì)于stage示启，詳細(xì)說明如下：

preset stage-0其實(shí)包含了stage-[1-3]，裝了0领舰，其他三個(gè)默認(rèn)就裝了夫嗓，不需要重復(fù)安裝，因?yàn)樗瑂tage-1冲秽，stage-2以及stage-3的所有功能舍咖。另外，[0-3]是代表了不同階段锉桑，但0是代表剛開始討論排霉，而3是代表快要成為標(biāo)準(zhǔn)規(guī)范了，切忌搞混民轴。在進(jìn)行實(shí)際開發(fā)時(shí)攻柠，可以更具需要來設(shè)置對(duì)應(yīng)的stage球订。如果省事懶得折騰，一般設(shè)置為stage-0即可瑰钮。如果為了防止開發(fā)人員使用某些太新的功能冒滩，我們可以限制到某個(gè)特定的stage。更詳細(xì)浪谴、更專業(yè)一點(diǎn)的介紹如下：

stage3包含以下兩個(gè)插件：

• 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