[js高手之路]深入浅出webpack教程系列索引目录:

本文继续接着上文,继续写下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详解(下)的更多相关文章

  1. [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)

    上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他 ...

  2. [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

    上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置 一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意 ...

  3. [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

    还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.htm ...

  4. [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法

    什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loade ...

  5. [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法

    我们还是接着上文继续,本文我们要讲的是图片资源的打包,图片在静态排版中,经常出现的两个位置是css通过background引入背景,还有一种就是在html模板文件中用img标签引入的方式,如果要在we ...

  6. [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法

    我们接着上文,那么在上篇文章的最后,写到了css-loader的用法,如果你用心发现,就能看到我在style.css样式文件中写了一个这样的样式: div { transition: all ease ...

  7. [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数

    [js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

  8. [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)

    [js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

  9. [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解

    接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...

随机推荐

  1. css层叠样式表

    css的三种声明方式    1.行内样式        通过每个标签都有的style属性        <div style="color:red;">黄卫星说没有内容 ...

  2. ArrayList的实现细节(基于JDK1.8)

    ArrayList是我们经常用到的一个类,下面总结一下它内部的实现细节和使用时要注意的地方. 基本概念 ArrayList在数据结构的层面上讲,是一个用数组实现的list,从应用层面上讲,就是一个容量 ...

  3. CentOS 常用命令及快捷键整理

    常用命令: 文件和目录: # cd /home                        进入 '/home' 目录 # cd ..                                ...

  4. efcore 配置链接sqlserver 记录

    本文将在asp.net core api 项目中使用efcore corefirst模式 简单配置链接sqlserver数据库,以及简单的数据库迁移操作 一 新建项目 1. 首先我们先用vs2017 ...

  5. C#和NewSQL更配 —— CockroachDB入门(可能是C#下的全网首发)

    阅读目录 CockroachDB是什么 环境部署 实战 性能测试 结语 一.CockroachDB是什么 CockroachDB(https://www.cockroachlabs.com)是Goog ...

  6. Apache安装编译遇到APR的问题

    http://mirrors.tuna.tsinghua.edu.cn/apache//httpd/httpd-2.4.27.tar.bz2Apache下载链接 在解压Apache源码包进入目录运行 ...

  7. js数组遍历和对象遍历

    针对js各种遍历作一个总结分析,从类型用处:分数组遍历和对象遍历:还有性能,优缺点等. JS数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9]; for ( ...

  8. EF对于已有数据库的Code First支持

    EF对于已有数据库的Code First支持 原文链接 本文将逐步介绍怎样用Code First的方式基于已有数据库进行开发.Code First支持你使用C#或者VB.Net定义类.并使用数据模型标 ...

  9. 关于JS中利用for循环解决实际问题的逻辑操作

    第一部分 <script>        //        <!--折纸:折多少次和珠穆朗玛峰一样高//1.一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度884 ...

  10. JavaScript之去除前后空格//g

    使用正则表达式"//g"去除字符串中的前后空格."//"表示所要匹配的字符串,如前后空格为/^\s*|\s*$/,这里"^"表示以" ...