webpack多页应用

Pocher 发布于2019-08-02 16:01 / 2188人阅读

本文主要讲了webpack怎么搭建多页应用，熟悉下webpack的基本用法。

新建文件夹，目录结构如下：

然后

cd webpack-test

npm init（根目录下创建了一个pakage.json）

npm install webpack@1.15.0 --save-dev（安装webpack，我这里用的是1版本）

根目录下新建webpack.config.js开始配置，参照这里

js部分的处理：

演示：在src > page > index下新建index.js随便输入一行代码，比如console.log("index"),修改webpack.config.js

在命令行输入webpack，可以看到根目录下多了个dist文件夹，src/page/index/index.js被打包到了dist/index.js里面，下面我们修改哈配置文件，让他可以打包多入口的情况

这样我们已经可以分别打包了，但是如果index > index.js 和 login > index.js同时引用了一个公共js，我们也希望可以把公共的东西提取出来多带带打包，这就要用到webpack的插件CommonsChunkPlugin，参考这里，注意：webpack4中已经没有这个插件

现在让index > index.js 和 login > index.js 同时 require("./../common.js")，修改配置文件:
config里面添加代码:

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: "common", // 对应入口处的common，会整体打包入common
        filename: "js/base.js"
        // chunks: ["common"]
    })
  ]

这里用了new webpack.optimize.CommonsChunkPlugin，所以需要在前面var webpack = require("webpack")

index > index.js：

require("./../common.js")
console.log("index")

require("./../common.js")
console.log("login")

再次打包，可以看到common.js被多带带打包到了base.js

html部分的处理：html-webpack-plugin

上面已经可以打包js了，如果现在我们要测试打包的内容，需要在page > view 下新建index.html,引入dist/js下面的js,我们想把html也打包到dist,按需引入自己的js,参考这里

这里要用到插件，需要安装：npm i --save-dev html-webpack-plugin
参见文档修改配置：

new HtmlWebpackPlugin({
   // 打包后的目标文件
   filename: "view/index.html",
   // 要打包的目标文件
   template: "src/view/index.html",
   inject: true,
   hash: true,
   // 表示当前html引入公共js和与当前对应的js
   // 需要引入哪些js
   chunks: ["common", "index"]
})

执行webpack,可以看到打包成功，点开dist/view/index.html：

说明打包成功，base.js和index.js都正确引入
面对多页应用，我们还经常面临多个页面头部和底部相同的情况，每个页面去写未免有点麻烦，我们可以用html-loader解决这个问题
安装:npm install html-loader --save-dev

view下新建layout文件夹,再分别新建header.html和footer.html
heder.html:

footer.html:

我是footer

然后在index.html里面修改：




    <%= require("html-loader!./layout/head.html")  %>


index
<%= require("html-loader!./layout/footer.html")  %>

再次打包，可看到：

到此，公共html也生效了，还剩下样式的处理和多带带打包，下次继续
第一次写，有些凌乱

云服务器 GPU云服务器多页应用构建多页应用多页更新多页多行数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54515.html

webpack多页应用架构系列（三）：怎么打包公共代码才能避免重复？

摘要：在上一篇文章多页应用架构系列二配置常用部分有哪些中，我介绍了如何配置多页应用的入口，然而，如果仅仅如此操作，带来的后果就是，打包生成出来的每一个入口文件都会完整包含所有代码。的初始化常用参数有哪些，给这个包含公共代码的命个名唯一标识。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190...

oliverhuang 2019-08-22 10:37 评论0 收藏0
webpack多页应用架构系列（一）：一步一步解决架构痛点

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。原文地址如果您对本系列文章感兴趣，欢迎关注订阅这里这系列文章讲什么本系列文章主要介绍如何用这一当前流行的构建工具来设计一个多页应用的架构。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000006843916如果您对本系列文章...

Lowky 2019-08-20 10:50 评论0 收藏0
webpack多页应用架构系列（九）：总有刁民想害朕！ESLint为你阻击垃圾代码

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。如果你使用了，或类似的，那么，通过编译前后的代码相差就很大了，这会造成两个问题以为例把你的代码转成什么样你自己是无法控制的，这往往导致无法通过的审查。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000007030775如果您...

dingding199389 2019-08-20 11:20 评论0 收藏0
webpack多页应用架构系列（十一）：预打包Dll，实现webpack音速编译

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。原文地址如果您对本系列文章感兴趣，欢迎关注订阅这里前言书承上文多页应用架构系列十如何打造一个自定义的。终于，发现了这一大杀器，打包时间过长的问题得到完美解决。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/119000000710437...

sixleaves 2019-08-20 11:33 评论0 收藏0
webpack多页应用架构系列（十二）：利用webpack生成HTML普通网页&页面模板

摘要：彻底分离源文件目录和生成文件目录使用生成出来的页面可以很安心地跟打包好的其它资源放到一起，相对于另起一个目录专门存放页面文件来说，整个文件目录结构更加合理如何利用生成页面生成页面主要是通过来实现的，下面来介绍如何实现。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/119000000712...

BaronZhang 2019-08-20 11:34 评论0 收藏0
webpack多页应用架构系列（十三）：构建一个简单的模板布局系统

摘要：原文地址如果您对本系列文章感兴趣，欢迎关注订阅这里前言上文多页应用架构系列十二利用生成普通网页页面模板我们基本上已经搞清楚如何利用来生成普通网页页面模板，本文将以我的脚手架项目介绍如何在这基础上搭建一套简单的模板布局系统。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000007...

yedf 2019-08-20 11:36 评论0 收藏0