博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
阅读量:6328 次
发布时间:2019-06-22

本文共 2352 字,大约阅读时间需要 7 分钟。

本文继续接着上文,继续写下webpack.config.js的其他配置用法.

一、把两个文件打包成一个,entry怎么配置?

在上文中的webpack.dev.config.js中,用数组配置entry

webpack.dev.config.js文件代码:

console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2module.exports = {    entry : ['./src/js/main.js', './src/js/calc.js'],    output : {        //__dirname,就是当前webpack.config.js文件所在的绝对路径        path : __dirname + '/dist', //输出路径,要用绝对路径        filename : 'index.bundle.js' //打包之后输出的文件名    }};

然后在src/js目录下面新建一个calc.js文件,代码如下:

1 function add( n1, n2 ){2     return n1 + n2;3 }4 alert( add( 10, 20 ) );之前的main.js文件的代码:1 function say(){2     alert( 'ghostwu告诉你怎么学习webpack' );3 }4 say();然后命令行下,执行npm run d执行打包命令,刷新index.html文件,就能看到两个结果了

二、把两个文件分别打包成2个文件,entry采用字面量(json)方式配置

console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2module.exports = {    entry : {        main : './src/js/main.js',        calc : './src/js/calc.js'    },    output : {        //__dirname,就是当前webpack.config.js文件所在的绝对路径        path : __dirname + '/dist', //输出路径,要用绝对路径        filename : '[name].bundle.js' //打包之后输出的文件名    }};    filename中的[name]是计算属性,这里的name就是main和calc,执行npm run d打包命令之后,就会在dist目录下生成两个文件calc.bundle.js, main.bundle.js, 但是这两个文件并没有被引入到index.html文件,我们的index.html文件引入的还是index.bundle.js文件,我们后面会用插件解决三、filename可以用别的计算属性

官网配置参考:

filename支持4种动态起名字的方式( id, name, hash, chunkhash )

console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2module.exports = {    entry : {        main : './src/js/main.js',        calc : './src/js/calc.js'    },    output : {        //__dirname,就是当前webpack.config.js文件所在的绝对路径        path : __dirname + '/dist', //输出路径,要用绝对路径        filename : '[id].bundle.js' //打包之后输出的文件名    }};id就是模块的编号( 0, 1, .... )

chunkhash:

console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2module.exports = {    entry : {        main : './src/js/main.js',        calc : './src/js/calc.js'    },    output : {        //__dirname,就是当前webpack.config.js文件所在的绝对路径        path : __dirname + '/dist', //输出路径,要用绝对路径        filename : '[chunkhash].bundle.js' //打包之后输出的文件名    }};

[name]与[hash]组合使用

console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2module.exports = {    entry : {        main : './src/js/main.js',        calc : './src/js/calc.js'    },    output : {        //__dirname,就是当前webpack.config.js文件所在的绝对路径        path : __dirname + '/dist', //输出路径,要用绝对路径        filename : '[name]-[hash].bundle.js' //打包之后输出的文件名    }};

clipboard.png

转载地址:http://vnwoa.baihongyu.com/

你可能感兴趣的文章
初识GO语言——安装Go语言
查看>>
SDK命令行操作
查看>>
基于Bootstrap的DropDownList的JQuery组件的完善版
查看>>
EXTJS学习系列提高篇:第二十四篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--阅增删改篇...
查看>>
Hadoop MapReduce编程 API入门系列之分区和合并(十四)
查看>>
判断二叉树是否平衡、是否完全二叉树、是否二叉排序树
查看>>
并查集的应用之求解无向图中的连接分量个数
查看>>
7个神奇的jQuery 3D插件
查看>>
在线浏览PDF之PDF.JS (附demo)
查看>>
波形捕捉:(3)"捕捉设备"性能
查看>>
AliOS Things lorawanapp应用介绍
查看>>
美国人的网站推广方式千奇百怪
查看>>
java web学习-1
查看>>
用maven+springMVC创建一个项目
查看>>
linux设备驱动第四篇:以oops信息定位代码行为例谈驱动调试方法
查看>>
redis知识点整理
查看>>
Hello World
查看>>
Spring3全注解配置
查看>>
ThreadLocal真会内存泄露?
查看>>
IntelliJ IDEA
查看>>