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都会通过这个函数去拼接输出的文件名称
内置名称还有如下:
- id, Chunk的唯一表示,从0开始
- name Chunk的名称
- hash Chunk唯一标识Hash值
- 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属性可以取以下值
- anonymous(默认)在加载此脚本资源时不会带上用户的cookie;
- 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"]
})
]
}
执行结果如下所示