webpack搭建多页面系统（二）：对webpack.config.js配置文件的理解

BlackFlagBin 发布于2019-08-21 18:40 / 2719人阅读

摘要：配置文件的理解的配置文件是没有固定的命名的，在我的项目中建立了两个配置文件，一个是开发的配置文件另一个是上线的配置文件。它们是怎么执行不同的配置文件的尼这才是重点。这是对两个配置文件的理解。

webpack配置文件的理解

webpack的配置文件是没有固定的命名的，在我的项目中建立了两个配置文件，一个是开发的配置文件webpack.config.js;另一个是上线的配置文件webpack.build.config.js。两者内容上的差别，在以后的文档中解释。它们是怎么执行不同的配置文件的尼？这才是重点。
在package.json文件中，有脚本的执行配置，如图：

在我们的cmd命令行中，开发时：执行npm run dev;将执行我们的webpack.config.js文件；
最终上线时：执行npm run build;将执行我们的webpack.build.config.js文件；两者的内容有细微的差别。
这是对两个配置文件的理解。
每次编译代码时，手动的npm run dev 就会变得有点麻烦。
webpack提供了几个选项，可以帮助我们在代码发生变化后自动编译代码：
1、webpack"s Watch Mode
2、webpack-dev-server
3、webpack-dev-middleware
多数场景中，使用webpack-dev-server。
参考官方文档：https://doc.webpack-china.org...
在我的项目中使用的是webpack-dev-sever。提供了一个简单的web服务器，并且能够实时重新加载（live reloading）
webpack.config.js

参考webpack-dev-server文档：https://doc.webpack-china.org...

devServer:{
    contentBase:目录文件所在的位置，
    historyApiFallback：任意的404响应都可能需要被替代为index.html.一般默认true.
    historyApiFallback:{
            rewrites:[
                {from:/^/$/,to:"/views/landing.html"}, #以根‘/’开始，以根‘/’结尾的请求，重定向到‘/views/landing.html’
                {from:/^/subpage/,to:"views/subpage.html"}, #以‘/subpage’开始的请求，重定向到‘views/subpage.html’
                {from:/./,to:"/views/404.html"} #不匹配上面的任意除了换行符之外的请求，重定向到‘/views/404.html’
            ]
        }
    inline:boolen;在dev-server的两种不同模式之间的切换。默认启用内联模式（
    inline mode）,处理实时重载的脚本被插入到你的包（bundle）中，并且构建消息将会出现在浏览器控制台。
    progress:boolen;用于命令行工具，将运行进度输出到控制台。
    port:number;指定要监听请求的端口号
    index:string;索引文件的文件名
    host:string;指定使用一个host.默认是localhost。ip地址
    proxy:object;代理配置,代理后端开发服务器API,并且希望在同域名下发送API请求。
    
    
}

这是对webpack.config.js中对webpack-dev-server的解读！！！可能存在一些不对的地方，希望指出！！！

云服务器 GPU云服务器对python的理解谈谈对php的理解对人工智能的理解对云服务器的理解

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

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

webpack搭建多页面系统（三）理解webpack.config.js的四个核心概念

摘要：关于模板的有好几种。一次安装所有的大家可以了解一些的用法把编译成。安装参考文档功能将源文件迁移到指定的目录，返回新的文件路径。安装用法它会将所有的入口中引用的移动到和页面对应的独立分离的文件。 webpack是需要自己编写自己需要的一个配置对象，取决你如何使用webpack,下面指定了所有的可用的配置选项。参考文档：https://doc.webpack-china.org... we...

邹强 2019-08-21 18:43 评论0 收藏0
webpack从零开始搭建多页面（一）:webpack起步到运行一个简单的demo

摘要：文件夹用来存放供浏览器读取的文件，这个是打包成的文件。在文件下手动建立一个文件，并写入下面的代码。配置出口文件的地址在版本后，支持多出口配置。可以防止不同操作系统之间的文件路径问题，并且可以使用相对路径按照预期工作。搭建webpack_demo1项目，使其运行起来 webpack的强大就不介绍了，我们直接动手做起来，我们从零开始一步步搭建一个多页面的系统，多参考webpack中文文档...

EsgynChina 2019-08-26 11:39 评论0 收藏0
webpack搭建多页面系统（一）：对webpack 构建工具的理解

摘要：前端模块化开发的问题大家可以参照文献对等文件的管理在页面完成之后，一般要对进行打包压缩，通常要借助于第三方的工具。是基于环境搭建的，首先自行安装。为什么使用webpack构建工具？ 1、开发效率方面：在一般的开发过程中，分发好任务后，每个人完成自己单独的页面，如果有的人开发完成之后，接手别人的任务，就有可能造成开发时候的冲突。如果利用模块化开发，就可以避免这一问题。前端模块化开发...

Kaede 2019-08-01 18:20 评论0 收藏0
webpack搭建多页面系统（一）：对webpack 构建工具的理解

摘要：前端模块化开发的问题大家可以参照文献对等文件的管理在页面完成之后，一般要对进行打包压缩，通常要借助于第三方的工具。是基于环境搭建的，首先自行安装。为什么使用webpack构建工具？ 1、开发效率方面：在一般的开发过程中，分发好任务后，每个人完成自己单独的页面，如果有的人开发完成之后，接手别人的任务，就有可能造成开发时候的冲突。如果利用模块化开发，就可以避免这一问题。前端模块化开发...

JinB 2019-08-21 18:40 评论0 收藏0
手动搭建vue+node单页面（一）

摘要：这里提供手动搭建单页面开发生产环境，并使用写后台代码，仅供小白参考代码虽然没多少，但牵扯的知识很多，需要逐个研究后续内容手动搭建单页面二项目地址内容提要，这一章会从到开发环境，生产环境的搭建思路先实现单页面的然后实现服务下的开发环境再实这里提供手动搭建vue单页面开发生产环境，并使用node写后台代码，仅供小白参考；代码虽然没多少，但牵扯的知识很多，需要逐个研究；后续内容《手动搭建...

The question 2019-08-22 16:17 评论0 收藏0