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的做用。