本篇為在學(xué)習(xí)Vue2.x的時(shí)候使用Webpack2.x的踩坑與總結(jié)，關(guān)于Vue2.x的踩坑與總結(jié)，點(diǎn)擊鏈接

項(xiàng)目地址：https://github.com/MrZhang123/Vue_project/tree/master/vue2.x

本地安裝npm包后如何在命令行運(yùn)行

在npm安裝包的時(shí)候，如果使用全局安裝，即npm install <packageName> -g，則在安裝完成后可以在終端運(yùn)行作為命令去運(yùn)行，但是如果是本地安裝的包npm install --save-dev <packageName>，則無法這樣直接運(yùn)行。那么如何運(yùn)行本地安裝的包呢？首先進(jìn)入項(xiàng)目目錄（即package.json所在目錄），然后使用以下命令即可運(yùn)行：

1
2

$ node_modules/.bin/<packageName>

除了可以這樣在命令行運(yùn)行外，還可以在文件中運(yùn)行

1
2
3
4
5
6

//index.js
let webpack = require('webpack');
webpack();

1
2

$ node index.js

webpack1.x升級(jí)2.x

1.module.loaders改成了module.rules

舊的loaders被新的rules取代，后者允許配置loader以及其他更多項(xiàng)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

  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.鏈?zhǔn)秸{(diào)用loaders

在webpack1.x中l(wèi)oaders可以鏈?zhǔn)秸{(diào)用，在2.x中依舊有該特性，使用rule.use配置項(xiàng)，use中設(shè)置一個(gè)loaders的數(shù)組而在1.x中使用!連接各個(gè)loader，舊版寫法只有在使用舊的module.loaders時(shí)有效。

1
2
3
4
5
6
7
8
9
10
11
12

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

3.取消在模塊中自動(dòng)添加-loader后綴

webpack2.x中不再添加-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

根據(jù)官方說法，做出這樣更改的原因是省略-loader會(huì)對(duì)新手造成誤解，所以去掉這個(gè)功能，如果想打開這個(gè)舊的功能，可以配置resolveLoader.moduleExtensions，但是并不推薦這么做，具體參閱issues#2986

1
2
3

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

4.使用options配置loader

在webpack1.x中可以通過webpack.config.js的自定義屬性來配置loader，這在webpack2.x中無法執(zhí)行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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升級(jí)2.x

1.在CLI使用的時(shí)候，–inline默認(rèn)開啟，無需在輸入命令時(shí)添加

2.刪除contentBase用proxy代替

3.減少控制臺(tái)無用輸出，在1.x中，當(dāng)我們停掉服務(wù)器后，控制臺(tái)會(huì)一直輸出錯(cuò)誤信息，但是在2.x中只會(huì)輸出[WDS] Disconnected!

extract-text-webpack-plugin

在使用webpack將vue_spa打包后，并不會(huì)出現(xiàn)css，因?yàn)閏ss被打包入build.js，如果從vue組件中抽離出css，需要安裝插件extract-text-webpack-plugin，在使用的時(shí)候需要配合v2版本的才可以使用（如果使用了webpack2，則對(duì)應(yīng)的插件版本都需要用v2版本）。具體配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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[] (必填項(xiàng)) 這里的 loader(s) 用于將資源轉(zhuǎn)換為css導(dǎo)出模塊

options.fallbackLoader: string | object | loader[] 當(dāng)css沒有被導(dǎo)出的時(shí)候這里的 loader(s) 會(huì)被使用 （即當(dāng)在plugins模塊中設(shè)置allChunks:false的時(shí)候）

在plugins中：

filename：可以設(shè)置被導(dǎo)出的css文件的路徑以及名字

allChunks：從所有附加塊中提取（默認(rèn)情況下，它只從初始?jí)K中提?。?/p>

html-webpack-plugin

1
2
3
4
5

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

title：用于生成文檔的document

filename：要注入的html文件，默認(rèn)為index.html。可以自定義（例如：assets/admin.html）

inject：
true | ‘head’ | ‘body’ | false
將資源注入所給的template或templateContent，當(dāng)設(shè)置為 true 或者 ‘body’，所有的資源會(huì)被注入到body底部。而head則會(huì)將js放到headelement

favicon: 在輸出的html中添加favicon

hash: true | false 如果為true，則將一個(gè)唯一的webpack編譯散列附加到所有包含的腳本和CSS文件。這對(duì)緩存清除很有用。

cache: true | false 如果為true（默認(rèn)），嘗試僅在更改后才發(fā)出文件。

是否要更換preset？

webpack2.x默認(rèn)支持es6的模塊，所以在編譯時(shí)候沒有必要將它們先轉(zhuǎn)換為CommonJS模塊再處理，所以在github中出現(xiàn)了babel-preset-es2015-webpack，但是這個(gè)模塊我在使用的時(shí)候出現(xiàn)了Cannot remove 'babel-plugin-transform-es2015-modules-commonjs' from the plugin list.的問題，根據(jù)babel-preset-es2015-webpack中的敘述以及issues#14可知，babel-preset-es2015已經(jīng)支持不轉(zhuǎn)換模塊中的import和export，只需要設(shè)置.babelrc

1
2
3
4
5
6
7
8
9
10

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

使用CommonsChunkPlugin將第三方庫單獨(dú)打包

很多情況下我們會(huì)引入第三方庫，但是默認(rèn)情況下，webpack會(huì)將第三方庫與我們自己寫的js一起打包進(jìn)生成文件中，為了讓第三方庫與我們自己寫的js分開，webpack2.x內(nèi)置一個(gè)插件CommonsChunkPlugin，它可以讓webpack在打包的時(shí)候?qū)⑽覀冏约簩懙膉s與第三方庫分開，具體用法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

entry:{
  app: './src/main.js',
  vendor: [
    'lodash',
    'axios',
    'vue',
    'vue-router'
  ]
},
output: {
  path: path.resolve(__dirname + '/dist'),
  publicPath: '/dist',
  filename: '[name].js'
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name:'vendor'
    })
]

這里需要注意一點(diǎn)，這里在在輸出的時(shí)候需要使用filename: '[name].js'，否則會(huì)報(bào)錯(cuò)。

參考：

從 webpack v1 遷移到 webpack v2

What’s new in webpack dev server 2.0