webpack html输出路径,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标签

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']

})

]

那么编译后:

注：如果没有设置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"]

})

]

}

执行结果如下所示