-
记录查看全部
-
loader是使用方法二： 在配置文件中配置： test的意思是对文件名进行按照后面的正则表达式进行正则匹配，匹配符合则使用后面对应的loader loader是对不同类型文件的一种处理，使它能够变成浏览器能识别的信息查看全部
-
优化1： 减少http请求，可以将一些固有的内容（脚本源码）直接插入到模板中： 在<script></scritp>中插入： <%= complication.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebapckPlugin.files.publicPath.length)].source() %> 其中： compilation.assets[url-1].source() //这里会根据路径url-1拿到对应文件的源码 进入url-1: htmlWebpackPlugin.files.chunks.main.entry.substr(length-1) //这里会取出entry这个url下标从length-1开始的剩下的url： length-1 = htmlWebpackPlugin.files.publicPath.length //也就是说 http://www.cdn.com/script/js/main.js 会取出publicPath长度后的部分： script/js/main.js 优化2：为了针对性（不要在body中再次引入main）地引入chunk，可以在body中利用模板语言加入逻辑： <%= for (var k in htmlWebpackPlugin.files.chunks) { %> <% if (k !== 'main') { %> <script src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script> <% } %> <% } %>查看全部
-
<%= htmlWebpackPlugin.files.chunks.main.entry %> 这里，通过webpack来拿到main这个chunk的路径 entry：是main这个chunk的路径，里面是带有publicPath的查看全部
-
场景： html中使用<script>标签引入文件会发生http请求，http请求比较费时，如何优化呢？？ complication //webpack暴露出来的自身的一个引用查看全部
-
针对多页面的场景： 模板中指定指向的chunk查看全部
-
上线准备： 准备一： output中的publicPath参数： output: { path: "./dist/" publicPath: "http://www.cds.com/" } 在项目正式上线时，会将所生成文件中的path替换为线上路径publicPath 准备二： html-webpack-plugin中minify来对生成文件index.html进行压缩： 此处可以参考文档，在www.npmjs.com中搜索html-webpack-plugin： new htmlWebpackPlugin({ minify: { removeComments: true, //根据模板生成文件时去除注释 collapseWhitespace: true // 去除空格或者换行符（非字符） } })查看全部
-
业务场景： 如何在index.html中拿到html-webpack-plugin中传入的参数： 通过模板语言拿到： <%= htmlWebpackPlugin.options.title %> 参数传入: 在webpack的plugin中 new htmlWebpackPlugin({ title: "这是模板的名字哦" })查看全部
-
htmlWebpackPlugin 其他配置： filename //可以指定生成的html的文件名 inject //可以指定生成js文件插入的html的位置"head"或者"body"查看全部
-
解决问题： html-webpack-plugin生成的index.html在output指定的path路径下： 可以在output的filename中指定js所需要的单独的相对路径查看全部
-
解决的问题：业务场景： 为了建立webpack生成的index.html与根目录下的index.html的联系，这里需要为webpack用来生成index.html的插件-htmlWebpackPlugin指定模板为： 根目录下的index.html查看全部
-
解决的问题：业务场景： 建立webpack生成的index.html与根目录下的index.html的联系： 以根目录下的index.html为模板生成dist下的index.html: 这里的context中可以设定 new htmlWebpackPlugin({ template: 'index.html' //context可以设定这里html的路径，默认是根目录 })查看全部
-
html-webpack-plugin的使用： webpack.config.js中的配置查看全部
-
在webpack中使用插件： 1- 在webpack.config.js中引入该插件 2- webpack的plugins（对应的值的类型是数组）中去加入该插件的对象（对插件对象进行初始化）查看全部
-
webpack插件： html-webpack-plugin 业务场景： 在根目录下的index.html中： 需要引入webpack打包后生成的文件（例如bundle.js）， 但是对于利用[chunkhash]生成的文件名每次都是不固定的，则，index.html中不可能每次把引入的js名去手动改写，所以： 需要这个插件来解决这个问题查看全部
举报
0/150
提交
取消