webpack管理输出

webpack管理输出

output

output配置如何输出最终想要的代码，output是一个object里面包含一系列配置
filename

output.filename配置输出文件的名称，为string类型，如果只有一个输出文件，我们可以将它写成静态不变的

filename:"bundle.js"

例子如下：

• 新建一个文件并命名为oneEntry.js,内容如下

function component(){
	var element = document.createElement("div");
	element.setAttribute("class","body");
	element.innerHTML = _.join(["hello","webpack"]);
	return element;
}
document.body.appendChild(component());

• 在新建一个配置文件并命名为webpack.one.js,内容如下：

	module.exports = {
		entry:"./src/oneEntry.js",
		output:{
			filename:"bundle.js",
			path:path.resolve(__dirname,"demo")
		}
	}

• 在终端执行webpack --config webpack.one.js
  执行结果如下：
  

像现在有多个chunk要输出时，就需要借助模块和变量了，前面说到webpack回味每个chunk取一个名称，通过占位符确保文件名臣的唯一性，可以根据chunk名称来区分输出的文件

filename:"[name].js"

例子如下：

• 新建文件并命名pageOne.js，内容如下

function pageOne(){
	console.log("pageOne")
}
pageOne()

• 新建文件并命名pageTwo，内容如下：

function pageTwo(){
	console.log("pageTwo")
}
pageTwo()

• 新建文件并命名webpack.multiPage.js,内容如下：

const path = require("path");
module.exports = {
	entry:{
		pageOne:"./src/pageOne.js",
		pageTwo:"./src/pageTwo.js",
	},
	output:{
		filename:"[name].js",
		path:path.resolve(__dirname,"demo")
	}
}

• 执行 webpack --config webpack.multiPage.js

运行结果如下：

代码里的[name]代表用内置的name变量去替换[name]，这时你可以把它看作一个字符串末班函数，每个要输出的chunk都会通过这个函数去拼接输出的文件名称

内置名称还有如下：

1. id， Chunk的唯一表示，从0开始
2. name Chunk的名称
3. hash Chunk唯一标识Hash值
4. chunkhash Chunk 内容的Hash值

注：hash和chunkhash的长度是可指定的，[hash:8]戴白取8位hash值，默认值是20位

path

output.path配置输出文件存放在本地的目录，必须是string类型的绝对路径。通常通过Node.js的path模块去获取路径

path.resolve(__dirname,"dist")

nodejs path模块
nodejs中__dirname总是指向被执行js文件的绝对路径
path.resolve()方法将路径或路径片段的序列解析为绝对路径

publicPath

在复杂的项目里可能会有一些构建出的资源需要异步加载，加载这些异步资源需要对应的URL地址。

output.publicPath配置发布到线上资源的URL前缀，为string类型。默认值是空字符串""，即使用相对路径

需要把构建出的资源文件航传到CDN服务商，有利于加快页面的打开速度。配置代码如下

filename:"[name]_[chunkhash:8].js",
publicPath:"https://cdn.example.com/assets/"

chunkFilename

output.chunkFilename, 配置无入口的chunk在输出时的文件名称。chunkFilename和filename非常类似，
但是chunkFilename只用于指定在运行过程中生成的chunk在输出的时的文件名称。常见的会在运行时生成chunk场景
只有在使用CommonChunkPlugin，使用import('path/to/module')动态加载等时，chunkFilename支持和filename一致的内置变量。

crossOrginLoaing

webpack输出的部门代码可能需要异步加载，而异步加载时通过jsonp方式实现。jsonp的原理是动态的向HTML中插入一个script标签去异步加载资源。
output.crossOriginLoading则是用于配置这个异步插入标签的crossorigin值
script标签的crossorigin属性可以取以下值

1. anonymous(默认)在加载此脚本资源时不会带上用户的cookie；
2. use-credentials 在加载此脚本资源时会带上用户的cookies；

管理输出

怎么引用资源？
在只有一个入口文件的时候，可以将打包的文件名写死然后手动在index.html中引用，但是当我们在配置文件中给打包的文件文件名使用哈希(hash)并输出多个bundle，
手动地对index.html文件进行管理，就会变得麻烦，这时我们可以通过插件的帮助使这个过程变得容易起来。

HtmlWebpackPlugin

作用：

• 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
• 可以生成穿件html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

配置属性

title：生成html文件的标题

filename：就是html文件的文件名，默认是index.html

template：指定你生成的文件所依赖哪一个html文件模板，模板类型可以是html、jade、ejs等。但是要注意的是，如果想使用自定义的模板文件的时候，你需要安装对应的loader

inject：inject有四个值：true body head false

• true：默认值，script标签位于html文件的body底部

• body：script标签位于html文件的body的底部

• head：script标签位于html文件的head中

• false：不插入生成的js文件，这个几乎不会用到

favicon

给你生成的html文件生成一个favicon，值是一个路径

plugins:[
	new HtmlWebpackPlugin({
		...
		favicon:"path/to/my_favicon.ico"
	})
]

然后在生成的html中就有了一个link标签

<link rel="shortcut icon" href="example.ico">

minify

使用minify会对生成的html文件进行压缩。默认是false。html-webpack-plugin内部集成了html-minifier，因此，还可以
对minify进行配置：(注意，虽然minify支持BooleanObject，但是不能直接这样写：minify：true， 这样会报错 ERROR in TypeError: Cannot use 'in' operator to search for 'html5' in true , 使用时候必须给定一个 { } 对象)

plugins:[
	new HtmlWebpackPlugin({
		...
		minify:{
			removeAttributeQuotes:true
		}
	})
]

cache

默认是true的，表示内容变化的时候生成一个新的文件

showErrors

当webpack报错的时候，会把错误信息包裹在一个pre中，默认是true

chunks

chunks主要用于多入口文件，当你有多个入口文件，那就会编译后生成多个打包后的文件，哪啊么chunks就能选择你要使用那些js文件

例子：

entry:{
	index:path.resolve(__dirname,"./src/index.js"),
	devor:path.resolve(__dirname,"./src/devor.js"),
	main:path.resolve(__dirname,"./src/main.js")
},
plugins:[
	new htmlWebpackPlugin({
		chunks:['index','main']
	})
]

那么编译后:

<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="main.js"></script>

注：如果没有设置chunks选项的话，那么就默认全部显示

excludeChunks

排除掉一些js

excludeChunks:["devor.js"]

chunksSortMode

script的顺序，默认四个选项：none quto dependency {function}

• dependency 不用说，按照不同文件的依赖关系来排序
• auto 默认值，插件的内置的排序方式，具体顺序

实例：多个入口生成多个html

• 新建文件夹并命名为multiple-page
• npm init -y 生成packge.json文件
• npm install --save-dev webpack webpack-cli html-webpack-plugin
• 在当前目录下新建文件夹，并命名为src，在src下新建文件并命名pageOne.js和pageTwo.js

pageOne.js内容如下

function pageOne(){
	console.log("I AM PAGEONE")
}
 pageOne()

pageTwo内容如下

function pageTwo(){
	console.log("I AM PAGETOW")
}
pageTwo()

• 新建文件并命名webpack.config.js,内容如下

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
	entry:{
		pageOne:"./src/pageOne.js",
		pageTwo:"./src/pageTwo.js"
	},
	output:{
		filename:"[name].[hash:8].js",
		path:path.resolve(__dirname,"dist")
	},
	plugins:[
		new htmlWebpackPlugin({
			title:"第一个页面",
			filename:"pageOne.html",
			chunks:["pageOne"]
		}),
		new htmlWebpackPlugin({
			title:"第二个页面",
			filename:"pageTow.html",
			chunks:["pageTwo"]
		})
	]
	
}

• 执行webpack

注：可以在packge.json里script里加入语句 "build":"webpack",然后执行npm run build

执行结果如下

清理/dist文件夹

webpack生成的文件会防止在/dist目录下，但是webpack无法最终到那些文件是实际项目中用到的，所以在每次构建钱清理/dist文件夹，这样只会生成用到的文件

clean-webpck-plugin是一个比较普及的管理插件，自动删除webpack里的dist目录

安装插件
npm install --save-dev clean-webpack-plugin

webpack.config.js内容如下

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const cleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = {
	entry:{
		pageOne:"./src/pageOne.js",
		pageTwo:"./src/pageTwo.js"
	},
	output:{
		filename:"[name].[hash:8].js",
		path:path.resolve(__dirname,"dist")
	},
	plugins:[
		new cleanWebpackPlugin(),
		new htmlWebpackPlugin({
			title:"第一个页面",
			filename:"pageOne.html",
			chunks:["pageOne"]
		}),
		new htmlWebpackPlugin({
			title:"第二个页面",
			filename:"pageTow.html",
			chunks:["pageTwo"]
		})
	]
	
}

执行webpack

执行结果如下:

提示错误webpack使用cleanWebpackPlugin插件时报错:cleanWebpackPlugin is not a constructor，翻了下文档，发现写法改了，需写成如下所示

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
module.exports = {
	entry:{
		pageOne:"./src/pageOne.js",
		pageTwo:"./src/pageTwo.js"
	},
	output:{
		filename:"[name].[hash:8].js",
		path:path.resolve(__dirname,"dist")
	},
	plugins:[
		new CleanWebpackPlugin(),
		new htmlWebpackPlugin({
			title:"第一个页面",
			filename:"pageOne.html",
			chunks:["pageOne"]
		}),
		new htmlWebpackPlugin({
			title:"第二个页面",
			filename:"pageTow.html",
			chunks:["pageTwo"]
		})
	]
	
}

执行结果如下所示