webpack配置基礎

1: 默認entry和output

最新版本的webpack已經能夠不須要webpack.config.js做爲配置文件。若是你的項目缺失配置文件的話，webpack會作如下默認配置：

entry - src/index.js
output - dist/main.js

2: 默認配置文件 vs 制定配置文件

若是項目根目錄有webpack.config.js文件，那webpack會默認使用它做爲配置文件。咱們也能夠本身在命令行裏經過 --config 指定配置文件，例如：

"scripts": {
  "build": "webpack --config prod.config.js"
}

3: path

webpakc使用node.js內置的path庫來處理路徑：

const path = require('path')

你可能還會注意到這個變量：__dirname
__dirname 的值就是當前module的路徑，它和對__filename執行path.dirname()是同樣的。例如：在/Users/mjr 路徑下執行node example.js，那麼：

console.log(__dirname);
// Prints: /Users/mjr
console.log(path.dirname(__filename));
// Prints: /Users/mjr

4: context
context是一個絕對路徑，它指定了接下來的全部配置的基本路徑，默認是當前項目路徑。例如：
/Users/xxx/study/webpack-demo/webpack.config.js

const path = require('path');
var context = path.resolve(__dirname, './');
console.log(context); //Users/xxx/study/webpack-demo

module.exports = {
    context: context,
    entry: './src/index.js',
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, 'dist')
    }
}

假如咱們在當前項目裏建立一個路徑test/， 可是裏面什麼都沒有，咱們把咱們配置裏的context改成test/路徑：

/Users/xxx/study/webpack-demo/webpack.config.js

const path = require('path');
var context = path.resolve(__dirname, 'test');
console.log(context); //Users/xxx/study/webpack-demo/test
module.exports = {
    context: context,
    entry: './src/index.js',
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, 'dist')
    }
}

當咱們再運行npm run build的時候，就會獲得error。由於path.resolve(__dirname, 'test')獲得的路徑是/Users/xxx/study/webpack-demo/test,咱們把context設爲這個路徑，咱們的entry是在當前context下尋找/src/index.js，而咱們知道這個確定是找不到的。

因此，由上面的例子咱們知道了context的做用。