Webpack提供了很多的命令选项来帮助用户构建应用,如果只是通过命令行来使用这些选项,会显得不方便。为了更好的使用Webpack提供的各种命令选项,我们可以创建一个webpack.config.js文件,在文件中配置我们的选项。在上一篇文章中我们使用了webpack app/main.js public/bundle.js命令生成目标文件,我们可以直接在webpack.config.js中进行配置:
module.exports = { entry: __dirname + "/app/main.js", //入口文件 output: { path: __dirname + "/public", //目标文件 filename: "bundle.js" } };
我们打开自动生成的bundle.js文件,可以看到,与我们原有代码相比有很大的变动,当我们需要调试代码或者程序报错时,肯定希望自动生成的代码和原有代码之间的行映射关系得到保存。可以在配置文件中加上source-map、eval-source-map等选项。
module.exports = { devtool: 'eval-source-map', entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" } };