Webpack2.x踩坑與總結

本篇爲在學習Vue2.x的時候使用Webpack2.x的踩坑與總結，關於Vue2.x的踩坑與總結，點擊連接

原文連接：http://mrzhang123.github.io/2...
項目地址：https://github.com/MrZhang123...

本地安裝npm包後如何在命令行運行

在npm安裝包的時候，若是使用全局安裝，即npm install <packageName> -g，則在安裝完成後能夠在終端運行做爲命令去運行，可是若是是本地安裝的包npm install --save-dev <packageName>，則沒法這樣直接運行。那麼如何運行本地安裝的包呢？首先進入項目目錄（即package.json所在目錄），而後使用如下命令便可運行：

$ node_modules/.bin/<packageName>

除了能夠這樣在命令行運行外，還能夠在文件中運行

//index.js

let webpack = require('webpack');

webpack();

$ node index.js

webpack1.x升級2.x

1.module.loaders改爲了module.rules

舊的loaders被新的rules取代，後者容許配置loader以及其餘更多項。

module: {
-   loaders: [
+   rules: [
      {
        test: /\.css$/,
-       loaders: [
+       use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
-           query: {
+           options: {
              modules: true
            }
        ]
      },
      {
        test: /\.jsx$/,
        loader: "babel-loader", // Do not use "use" here
        options: {
          // ...
        }
      }
    ]
  }

以上寫法中，Rule.loader是Rule.use: [ { loader } ]的簡寫。

2.鏈式調用loaders

在webpack1.x中loaders能夠鏈式調用，在2.x中依舊有該特性，使用rule.use配置項，use中設置一個loaders的數組而在1.x中使用!鏈接各個loader，舊版寫法只有在使用舊的module.loaders時有效。

module: {
-   loaders: {
+   rules: {
      test: /\.less$/,
-     loader: "style-loader!css-loader!less-loader"
+     use: [
+       "style-loader",
+       "css-loader",
+       "less-loader"
+     ]
    }
  }

3.取消在模塊中自動添加-loader後綴

webpack2.x中再也不添加-loader

module: {
    rules: [
      {
        use: [
-         "style",
+         "style-loader",
-         "css",
+         "css-loader",
-         "less",
+         "less-loader",
        ]
      }
    ]
  }

根據官方說法，作出這樣更改的緣由是省略-loader會對新手形成誤解，因此去掉這個功能，若是想打開這個舊的功能，能夠配置resolveLoader.moduleExtensions，可是並不推薦這麼作，具體參閱issues#2986

+ resolveLoader: {
+   moduleExtensions: ["-loader"]
+ }

4.使用options配置loader

在webpack1.x中能夠經過webpack.config.js的自定義屬性來配置loader，這在webpack2.x中沒法執行

module.exports = { 
  ...
  module: { 
    use: [{ 
      test: /\.tsx?$/,
      loader: 'ts-loader'
    }]
  },
  // does not work with webpack 2
  ts: { transpileOnly: false } 
}
//webpack2 use options
module.exports = { 
  ...
  module: { 
    use: [{ 
      test: /\.tsx?$/,
      loader: 'ts-loader'
      options:  { transpileOnly: false }
    }]
  }
}

webpack插件的使用

webpack-dev-server1.x升級2.x

1.在CLI使用的時候，--inline默認開啓，無需在輸入命令時添加

2.刪除contentBase用proxy代替

3.減小控制檯無用輸出，在1.x中，當咱們停掉服務器後，控制檯會一直輸出錯誤信息，可是在2.x中只會輸出[WDS] Disconnected!

extract-text-webpack-plugin

在使用webpack將vue_spa打包後，並不會出現css，由於css被打包入build.js，若是從vue組件中抽離出css，須要安裝插件extract-text-webpack-plugin，在使用的時候須要配合v2版本的纔可使用（若是使用了webpack2，則對應的插件版本都須要用v2版本）。具體配置以下：

module:{
  rules:[
    {
      test: /\.vue$/,
      loader: 'vue',
      options: {
        loaders:{
          css: extractTextPlugin.extract({
            loader: 'css-loader',
            fallbackLoader: 'vue-style-loader'
          })
        }
      }
    }
  ]
},
plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new extractTextPlugin({
    filename:'/style.css',
    allChunks:true
  })
],

在options中：

options.loader: string | object | loader[] (必填項) 這裏的 loader(s) 用於將資源轉換爲css導出模塊

options.fallbackLoader: string | object | loader[] 當css沒有被導出的時候這裏的 loader(s) 會被使用 （即當在plugins模塊中設置allChunks:false的時候）

在plugins中：

filename：能夠設置被導出的css文件的路徑以及名字

allChunks：從全部附加塊中提取（默認狀況下，它只從初始塊中提取）

html-webpack-plugin

plugins: [
  new htmlWwebpackPlugin({
    filename: 'assets/admin.html'
  }),
]

title：用於生成文檔的document

filename：要注入的html文件，默認爲index.html。能夠自定義（例如：assets/admin.html）

inject：
true | ‘head’ | ‘body’ | false
將資源注入所給的template或templateContent，當設置爲 true 或者 ‘body’，全部的資源會被注入到body底部。而head則會將js放到headelement

favicon: 在輸出的html中添加favicon

hash: true | false 若是爲true，則將一個惟一的webpack編譯散列附加到全部包含的腳本和CSS文件。這對緩存清除頗有用。

cache: true | false 若是爲true（默認），嘗試僅在更改後才發出文件。

是否要更換preset？

webpack2.x默認支持es6的模塊，因此在編譯時候沒有必要將它們先轉換爲CommonJS模塊再處理，因此在github中出現了babel-preset-es2015-webpack，可是這個模塊我在使用的時候出現了Cannot remove 'babel-plugin-transform-es2015-modules-commonjs' from the plugin list.的問題，根據babel-preset-es2015-webpack中的敘述以及issues#14可知，babel-preset-es2015已經支持不轉換模塊中的import和export，只須要設置.babelrc

{
    "presets": [
        [
            "es2015",
            {
                "modules": false
            }
        ]
    ]
}

參考：

從 webpack v1 遷移到 webpack v2
What’s new in webpack dev server 2.0