webpack entry和output配置属性
2017-09-12 14:03
525 查看
1、entry
entry的三种配置方式:
(1)传递字符串:
(2)传递数组
将创建“多个主入口(multi-main entry),并且将它们的依赖导向(graph)到一个“chunk”时。
示例,webpack.config.js文件为:
执行命令:
效果为文件合并到一个文件中了,如下:
(3)传递对象
webpack.config.js文件为:
注意:
你应该使用以下的替换方式来确保每个文件名都不重复。
2、output
指定硬盘每个输出文件的名称。在这里你不能指定为绝对路径!
文件hash码:
执行命令:
结果:
[hash] 每个文件的hash都一样,文件的hash为打包的hash。
使用[chunkhash] 文件的hash都不一样,也与打包hash不一样,这里的hash是文件的MD5值。
entry的三种配置方式:
(1)传递字符串:
单个入口语法:传递一个字符串
entry: './src/js/main.js',
(2)传递数组
将创建“多个主入口(multi-main entry),并且将它们的依赖导向(graph)到一个“chunk”时。
entry: ['./src/js/main.js','./src/js/a.js'],
示例,webpack.config.js文件为:
module.exports = { //打包入口 entry: ['./src/js/main.js','./src/js/a.js'], //打包后的文件 output: { //不加__dirname 会报错 //path:__dirname +'./dist/js', //filename:'bundle.js' //以上2行window下报错 path: __dirname, filename: './dist/js/bundle.js' } }
执行命令:
npm run webpack
效果为文件合并到一个文件中了,如下:
(3)传递对象
webpack.config.js文件为:
module.exports = { //打包入口 entry: { main: './src/js/main.js', a: './src/js/a.js' }, //打包后的文件 output: { //不加__dirname 会报错 //path:__dirname +'./dist/js', //filename:'bundle.js' //以上2行window下报错 path: __dirname, //注意:使用[name]确保每个文件名都不重复 filename: './dist/js/[name].js' } }
注意:
你应该使用以下的替换方式来确保每个文件名都不重复。
[name]被 chunk 的 name 替换。
[hash]被 compilation 生命周期的 hash 替换。
[chunkhash]被 chunk 的 hash 替换。
2、output
output.filename
指定硬盘每个输出文件的名称。在这里你不能指定为绝对路径!
文件hash码:
module.exports = { //打包入口 entry: { main: './src/js/main.js', a: './src/js/a.js' }, //打包后的文件 output: { //不加__dirname 会报错 //path:__dirname +'./dist/js', //filename:'bundle.js' //以上2行window下报错 path: __dirname, //注意:使用[name]确保每个文件名都不重复 filename: './dist/js/[name]-[hash].js' } }
执行命令:
npm run webpack
结果:
[hash] 每个文件的hash都一样,文件的hash为打包的hash。
module.exports = { //打包入口 entry: { main: './src/js/main.js', a: './src/js/a.js' }, //打包后的文件 output: { //不加__dirname 会报错 //path:__dirname +'./dist/js', //filename:'bundle.js' //以上2行window下报错 path: __dirname, //注意:使用[name]确保每个文件名都不重复 filename: './dist/js/[name]-[chunkhash].js' } }
使用[chunkhash] 文件的hash都不一样,也与打包hash不一样,这里的hash是文件的MD5值。
相关文章推荐
- webpack entry和output配置属性
- webpack---webpack.config.js配置基本要素entry、output、loader、plugins等
- 详解webpack的配置文件entry与output
- webpack配置entry和output
- 入门webpack(三)webpack之entry和output
- 【webpack】entry 和output的详细介绍
- webpack中output配置项中chunkFilename属性的用法
- webpack 多entry 配置
- webpack中output配置
- webpack 自动发现 entry 的配置和引用方式
- 论webpack配置技巧
- 二、webpack的基本配置(1)
- Webpack-dev-server实际项目中配置
- webpack详细配置解析
- webpack 多入口配置
- 从零搭建个人博客(3)-如何在webpack环境下配置jquery和富文本编辑器Simditor
- webpack你值得拥有-从四个核心配置谈起
- webpack配置依赖
- web.config配置文件中的属性add,key,value含义
- webpack入门(三)——webpack 配置