webpack搭建多页面系统（一）：对webpack 构建工具的理解

JinB 发布于2019-08-21 18:40 / 2739人阅读

摘要：前端模块化开发的问题大家可以参照文献对等文件的管理在页面完成之后，一般要对进行打包压缩，通常要借助于第三方的工具。是基于环境搭建的，首先自行安装。

为什么使用webpack构建工具？

1、开发效率方面：

在一般的开发过程中，分发好任务后，每个人完成自己多带带的页面，如果有的人开发完成之后，接手别人的任务，就有可能造成开发时候的冲突。

如果利用模块化开发，就可以避免这一问题。前端模块化开发的问题大家可以参照文献：https://github.com/fouber/blo...

2、对js、css、html等文件的管理：

在页面完成之后，一般要对js、css、html进行打包压缩，通常要借助于第三方的工具。webpack可以通过合适的loader在代码上线的时候，对其进行压缩，删除注释。这可以节约资源。

3、实时刷新功能：

我们之前在开发的时候，都是通过配置nginx进行代理，来访问后台的数据，每次修改配置文件都要重启服务器，很麻烦！！！在修改代码之后，要按一下f5,才能刷新，甚至时ctrl+f5强制刷新，感觉有点麻烦。可以利用webpack 的热更新做到实时刷新。提高了开发的效率。

4、使用es6新语法：

对于不兼容es6的浏览器，利用webpack中的babel-loader加载器可以解析es6语法，支持各种浏览器。感觉webpack的对模块化开发真的好强大，这是通过一个项目之后，对webpack的认识，不过对webpack的性能优化这方面做的很少，看了开发文档，还是遇到各种问题，欢迎各位大神指点。

webpack是基于node环境搭建的，首先自行安装node。
参考文献：https://www.liaoxuefeng.com/w...
项目地址：https://github.com/houseLiYon...
在cmd命令行中git clone https://github.com/houseLiYon...
安装淘宝镜像后：cnpm install;安装各种依赖；可能加载器的版本不对应，请安装对应的版本。
之后在webpack.config.js中，修改devServer的host;我的主机ip是
192.168.10.143.查看自己本机的ip,cmd命令行中，输入ipconfig;修改为自己的IP。
然后执行：cnpm run server 本地就打开项目。

目录结构

第一次写文章，可能表述不清楚，欢迎指点！！！
对于第一次使用webpack 同学，可能学起来有点吃力，建议先去慕课网上学习一下基本的课程：http://www.imooc.com/video/14...

超融合服务器 idc机房托管 webpack搭建 webpack的作用 webpack的cdn webpack

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

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

webpack搭建多页面系统（一）：对webpack 构建工具的理解

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

Kaede 2019-08-01 18:20 评论0 收藏0
webpack搭建多页面系统（二）：对webpack.config.js配置文件的理解

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

BlackFlagBin 2019-08-21 18:40 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

call_me_R 2019-08-23 13:43 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

wzyplus 2019-08-02 12:08 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

aristark 2019-08-29 17:24 评论0 收藏0