【前端】webpack如何多入口配置多页面

现在前端SPA单页面这么流行,比如一套脚手架,我们在用到的时候连vue+vue-router等,甚至连webpack或者gulp等一套就集成了,里面只需要修改一些简单的配置,就可以解决跨域问题,但是,当我们项目慢慢大起来的时候,总要用到多页面的时候,那我们如何修改vue-cli或者是create-react-app这种脚手架中的默认配置呢?

第一步:添加多个页面

目录中可以是两个文件夹下面的两个html,我们以vue为例,src目录下面我们有两个html【index,web-app】,然后我们添加两个js【app.js, mini.js】脚本文件,里面都是新建一个vue实例,但是依赖的包不一样,比如一个是elementUI,一个是mint-ui,准备工作完成.如下图

第二步:在build>>webpack.base.conf.js中修改webpack的基础配置,添加两个入口文件,分别对应两个入口js【main.js, mini.js】

第三步:配置开发环境,我们在本地调试的时候,是不是也需要配置多入口呢?是的,你没猜错,在build>>webpack.dev.conf.js的plugins下面新建两个

```

newHtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
chunks: ['app']
})

```

如下图,你是十个页面,那就写十个好了么,关我什么事情,对不对

第四步:生产环境一部曲,配置生产环境和开发环境不一样,我们要现在config的index.js的build中加一点东西,因为开发环境的话直接就可以从本地访问/,但是生产环境就需要我们在

第五步:配置生产环境二部曲,同样的在build>>webpack.prod.conf.js的plugins下面新建两个HtmlWebpackPlugin

还是在plugins中,在之前的有index.html的后面,紧跟着写就可以了,里面的参数可以查看webpack官方文档,这里不多bb

特别注意这个【chunks】,我的理解就是把我们页面需要的js文件拆分成小碎片,但是要特别注意的是,这里的顺序不能乱,我们要把公共的js文件,比如默认的【'manifest', 'wendor'】写到自定义的js文件前面,否则会报错提示你

这就是因为你的页面在打包之后,js文件的引入顺序错误所导致的,回去再检查一遍单词是否写错就可以了。

就是这么简单咯,然后就可以在network中查看,是不是两个页面,分别引用了不同的js文件。

发表评论

电子邮件地址不会被公开。 必填项已用*标注