webpack entry和output配置属性
1、entry
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——entry,output,plugins,loader,chunk知识
entry:打包入口 代码的入口,找到依赖模块 打包的入口,webpack去哪个文件找依赖,或是去那个文件依赖的依赖 可以是一个或者多个入口 例如: 1.module.exports={ entry: ...
- webpack2的配置属性说明entry,output,state,plugins,node,module,context
Webpack2配置属性详解 webpack说明 webpack是前端构建的一个核心所在,如果说后端构建就是把高级语言代码编译成机器码,那么前端的构建就是重新组合原有的代码,虽然并不编译成机器码,但实 ...
- webpack学习(五)entry和output的基础配置
1:entry和output就是打包的入口和出口的两个对象.但是如果入口文件就一个的话(应该说只希望打包出一个脚本文件), entry直接跟一个字符串(入口文件路径)就可以了.如:entry : &q ...
- Webpack探索【4】--- entry和output详解
本文主要讲entry和output相关内容.
- webpack学习笔记—webpack安装、基本配置
文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...
- webpack安装、基本配置
文章结构: 什么是webpack? 安装webpack webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学react ...
- webpack 从0 手动配置
1. npm init 2. npm install -D webpack webpack-cli 3. 创建webpack入口文件( 默认 webpack.config.js 可以通过 webpac ...
- webpack 2.6.1配置笔记
2017-09-11更新:更新到webpack 2.6.1所对应的配置,完善部分代码注释. 由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和c ...
- 详解webpack-dev-server的配置属性
1.devServer.contentBase 它指定了服务器资源的根目录,如果不写入contentBase的值,那么contentBase默认是项目的目录. 在上面例子中产生错误和后来解决错误的 ...
随机推荐
- hdu 2112 HDU Today (floyd算法)
这道题貌似在原来学长给我们的搞的小比赛中出过! 这次又让我遇到,果断拿下! 不过方法很蠢,跑了1000多ms,虽然要求5000ms以内! 题目就是给你一些位置之间的距离,然后再让你求特定的两点之间的距 ...
- JetBrains 系列软件汉化包
原文地址:https://blog.csdn.net/pingfangx/article/details/78826145 JetBrains 系列软件汉化包 关键字: Android Studio ...
- 【Eclipse提高开发速度-插件篇】安装多语言Propertys编辑工具
安装的的时候能够通过 Help>Eclipse Marketplace的 搜索方式安装 或者 Help>Install New Software Name:Propertys URL:ht ...
- Android 手机 无线 ADB
要用网络调试Android需要设备已经获取root权限 如果手机没有命令行工具,请先在手机端安装终端模拟器,然后在终端输入: $su #stop adbd #setprop service.adb.t ...
- Android Activity的四种LaunchMode!!!
本文转自: http://marshal.easymorse.com/archives/2950. 写的非常好,分享给大家!!! 在多Activity开发中,有可能是自己应用之间的Activity跳转 ...
- activity之间參数传递&&获取activity返回值&&activity生命周期
Activity之间參数传递 A activity想将參数传给B activity时能够利用Intent将消息带过去 Intent intent = new Intent(this,BActivity ...
- JDK1.6官方下载_JDK6官方下载
JDK1.6官方下载_JDK6官方下载地址: http://www.java.net/download/jdk6/6u10/promoted/b32/binaries/jdk-6u10-rc2-bin ...
- Android之获取sdcard卡的信息
public static SDCardInfo getSDCardInfo() { String sDcString = android.os.Environment.getExternalStor ...
- 《逆袭大学:传给IT学子的正能量》
<逆袭大学:传给IT学子的正能量> 基本信息 作者: 贺利坚 丛书名: 图灵原创 出版社:人民邮电出版社 ISBN:9787115347473 上架时间:2014-3-3 出版日期:201 ...
- 为apache安装mod_wsgi的时候出现-fpic的问题
1.为了在apache里跑python项目,需要安装模块mod_wsgi 2.但是由于yum只支持python2.6,所以通过yum install mod_wsgi方式安装的mod_wsgi是pyt ...