Webpack：entry、output、devtools的配置（6）

entry和output

const path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { mode: 'development', entry: { //多文件入口 main:'./src/index.js', subMain:'./src/index.js' }, plugins: [ new HtmlWebpackPlugin({ template: 'src/index.html' }), new CleanWebpackPlugin() ], output: { //根据entry的key名字进行打包 filename: '[name].js', //此输出目录对应的公开 URL，如：http://www.baidu.com/main.js publicPath:'http://www.baidu.com', path: path.resolve(__dirname, 'dist') } };

devtool

阅读参考：devtool

const path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { mode: 'development', //none:生成环境，不需要生成source map，也无法查看具体的代码错误在哪 //source-map:默认，生成一个map文件与源文件对应，可以具体知道错误在哪，但耗费打包性能 //cheap-module-eval-source-map:通常在开发环境里使用，包含第三方的module错误，精确到代码错误行 //nosources-source-map：生产环境，实在要看代码错误在哪就开启，会暴露反编译后的文件名和结构，但它不会暴露原始代码。 devtool: 'inline-source-map', entry: { main: './src/index.js' }, plugins: [ new HtmlWebpackPlugin({ template: 'src/index.html' }), new CleanWebpackPlugin() ], output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') } };