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