Html Webpack Replaceurl Plugin
此插件需配合html-webpack-plugin使用,作用是将html文档中对本地静态资源(js/style)的引用替换为经webpack编译后url。
安装
npm install html-webpack-replaceurl-plugin --save-dev
使用方法
配置webpack:
let HtmlWebpackPlugin = ;let HtmlWebpackReplaceurlPlugin = ;let webpackConfig = entry: 'main.a':'main.a.js' 'vendor': 'vue' output: path: 'dist' publicPath: '/' filename: '[name].[hash].js' plugins: name: 'vendor' filename: 'vendor.js' inject: false //此项必须配置为false // 解析模式:strict-严格模式;loose-宽松模式 mode: 'loose' js: // 文件名前缀 mainFilePrefix: 'main' // 代替换文件名是否包含hash指纹 useHash: false // 文件名分隔符,默认文件名规范为main.[name].js separator: '.' // 是否存在common模块 common: true // dll文件信息 dll: name: 'webapp.dll.js' url: '/js/webapp.dll.js' css: // 文件名前缀 mainFilePrefix: 'main' // 是否使用hash useHash: false // 文件名分隔符,默认文件名规范为main.[name].css separator: '.' // 是否在url末尾加入时间戳,默认false urlTimestamp: false ;
上述配置项应用于index.html文件:
Webpack App
编译后的index.html内容为:
Webpack App
模式选择
loose
-宽松模式,使用正则匹配,准确度略低;strict
-严格模式,解析html文档100%匹配准确度。
详细原理请参考boi-资源定位。