webpack -- output挖坑

mac2022-06-30  21

一、配置输出文件

output输出口必须是个对象,因为它必须有两个属性:filename输出出去的文件的名字,一般都是bundle.jspath文件要输出出去到哪里,一般都是dist文件

output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }

上面这个是单页面入口配置时的设定,在入口配置那里我们提到了多页面引用,那如果我们是多页面引用,那上面这个输出就不行了,这时可以这样配置:

const config = { entry: { app: path.resolve(__dirname, 'src/index.js'), main: path.resolve(__dirname, 'src/main.js'), test: path.resolve(__dirname, 'src/test.js') }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } }

Tips [name]就是根据入口配置的名字自动添加的,比如配置的['app','main','test'],运行npm run build之后,可以在dist里面看见三个bundle.js文件

// dist app.bundle.js main.bundle.js test.bundle.js

另外,一般开发环境,可以给输出文件配置一个hash,来保证文件的唯一性

const config = { entry: { app: path.resolve(__dirname, 'src/index.js'), main: path.resolve(__dirname, 'src/main.js'), test: path.resolve(__dirname, 'src/test.js') }, output: { filename: '[name].[hash:8].bundle.js', path: path.resolve(__dirname, 'dist') } }

转载于:https://www.cnblogs.com/zjh-study/p/10844964.html

最新回复(0)