[js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
[js高手之路]深入浅出webpack教程系列索引目录:
- [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
- [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
- [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
- [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
- [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
- [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
- [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
本文继续接着上文,继续写下webpack.config.js的其他配置用法.
一、把两个文件打包成一个,entry怎么配置?
在上文中的webpack.dev.config.js中,用数组配置entry
webpack.dev.config.js文件代码:
console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2
module.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文件,代码如下:
function add( n1, n2 ){
return n1 + n2;
}
alert( add( 10, 20 ) );
之前的main.js文件的代码:
function say(){
alert( 'ghostwu告诉你怎么学习webpack' );
}
say();
然后命令行下,执行npm run d执行打包命令,刷新index.html文件,就能看到两个结果了
二、把两个文件分别打包成2个文件,entry采用字面量(json)方式配置
console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2
module.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可以用别的计算属性
官网配置参考:https://webpack.js.org/configuration/output/#output-filename
filename支持4种动态起名字的方式( id, name, hash, chunkhash )
console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2
module.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\demo2
module.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\demo2
module.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' //打包之后输出的文件名
}
};
[js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)的更多相关文章
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他 ...
- [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)
上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置 一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意 ...
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.htm ...
- [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loade ...
- [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
我们还是接着上文继续,本文我们要讲的是图片资源的打包,图片在静态排版中,经常出现的两个位置是css通过background引入背景,还有一种就是在html模板文件中用img标签引入的方式,如果要在we ...
- [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
我们接着上文,那么在上篇文章的最后,写到了css-loader的用法,如果你用心发现,就能看到我在style.css样式文件中写了一个这样的样式: div { transition: all ease ...
- [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
- [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
- [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解
接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...
随机推荐
- css层叠样式表
css的三种声明方式 1.行内样式 通过每个标签都有的style属性 <div style="color:red;">黄卫星说没有内容 ...
- ArrayList的实现细节(基于JDK1.8)
ArrayList是我们经常用到的一个类,下面总结一下它内部的实现细节和使用时要注意的地方. 基本概念 ArrayList在数据结构的层面上讲,是一个用数组实现的list,从应用层面上讲,就是一个容量 ...
- CentOS 常用命令及快捷键整理
常用命令: 文件和目录: # cd /home 进入 '/home' 目录 # cd .. ...
- efcore 配置链接sqlserver 记录
本文将在asp.net core api 项目中使用efcore corefirst模式 简单配置链接sqlserver数据库,以及简单的数据库迁移操作 一 新建项目 1. 首先我们先用vs2017 ...
- C#和NewSQL更配 —— CockroachDB入门(可能是C#下的全网首发)
阅读目录 CockroachDB是什么 环境部署 实战 性能测试 结语 一.CockroachDB是什么 CockroachDB(https://www.cockroachlabs.com)是Goog ...
- Apache安装编译遇到APR的问题
http://mirrors.tuna.tsinghua.edu.cn/apache//httpd/httpd-2.4.27.tar.bz2Apache下载链接 在解压Apache源码包进入目录运行 ...
- js数组遍历和对象遍历
针对js各种遍历作一个总结分析,从类型用处:分数组遍历和对象遍历:还有性能,优缺点等. JS数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9]; for ( ...
- EF对于已有数据库的Code First支持
EF对于已有数据库的Code First支持 原文链接 本文将逐步介绍怎样用Code First的方式基于已有数据库进行开发.Code First支持你使用C#或者VB.Net定义类.并使用数据模型标 ...
- 关于JS中利用for循环解决实际问题的逻辑操作
第一部分 <script> // <!--折纸:折多少次和珠穆朗玛峰一样高//1.一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度884 ...
- JavaScript之去除前后空格//g
使用正则表达式"//g"去除字符串中的前后空格."//"表示所要匹配的字符串,如前后空格为/^\s*|\s*$/,这里"^"表示以" ...