![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
秋刀鱼笛滋味
这个作者很懒,什么都没留下…
展开
-
webpack实例解析一(基础)
webpack的作用大家都知道:把项目中的各种资源,解析后打包打一起安装建议安装带本地 而不是全局,避免版本问题cnpm i webpack webpack-cli -D创建一个demo文件夹,结构如下package,json各种包{ "name": "webpack", "version": "1.0.0", "description": "", "script...原创 2019-06-13 19:41:41 · 306 阅读 · 0 评论 -
webpack实例解析五(用.env.development设置环境变量)
原理:1,利用node的fs模块读取文件处理成对象2,用webpack.DefinePlugin插件,设置process.envreadEnv.jsconst fs = require('fs');const path = require('path');// 读取环境变量的文件把它转化成对象module.exports = (file) => { // flie为文件路...原创 2019-08-13 18:49:03 · 19639 阅读 · 0 评论 -
webpack实例解析二(插件)
除了一中的3个参数,webpack的列一个参数plugins,可以干预打包的过程,自动化等等文件下载:链接:https://pan.baidu.com/s/1QTJhqn31uqXhnIXOdvsbyw提取码:ui8k下面以HtmlWebpackPlugin为例,它你能自动把打包的文件引入html,设置各种网页的需求文件初始结构:package.json{ "name": "...原创 2019-08-09 19:01:01 · 284 阅读 · 0 评论 -
webpack实例解析三(devServer)
webpack的devServer,给我们提供了一个本地的node服务器,用于开发模式下调试我们的应用.webpack-dev-server模块启动之后把我们的代码打包到node服务器,提供了热更新,后端代理,自动启动浏览器等实用功能。webpack-dev-server的配置支持两种形式:1,直接在package.json 的 script 命令后面配置、直接控制台 webpack-dev...原创 2019-08-10 17:08:37 · 906 阅读 · 0 评论 -
webpack实例解析四(根据环境分离配置)
development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。开发环境:我们需要:强大的 source map(源码映射-> debug) 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server(本地服务器)。生产环境:关注点在于压...原创 2019-08-12 17:02:27 · 844 阅读 · 0 评论