【】webpack

一、什么是webpack

是前端资源的构建工具,将各种前端资源做模块化处理,打包生成对应的静态资源

二、webapck的五个核心

1、入口(Entry):webpack以哪个文件作为入口开始打包,分析和构建内部依赖图

2、输入(Output):将打包好的资源输出到哪个以及如何命名

3、打包器(Loader):让webpack能够处理那些非js的文件(如样式、图片等),webpack本身只能理解js文件

4、插接(Plugins):可以执行范围更广的任务,从打包优化、压缩到后来的重新定义环境的变量等

5、模式(Mode):指示webpack使用相对应模式的配置,有两种模式:开发模式和生产模式

development(开发模式):能让代码在本地调试运行的环境

production(生产模式):能让代码优化上线运行的环境

三、webpack的初始化配置和打包js文件

1、下载安装webpack:

从文件里面cmd进入

全局安装/本地安装:cnpm i webpack webpack-cli -g/-D

或者

npm init -y

npm install webpack webpack-cli --save-dev

2、在创建的文件夹里面创建src文件夹,里面创建入口文件index.js和mjs文件,然后将mjs文件里面的内容导入index.js文件中,

3、打包index.js文件webpack ./scr/index.js -o ./dist

打包成功,查看dist文件夹下自动生成了一个main.js

然后在src下面创建一个index.html调用

开发环境:webpack ./src/index.js -o ./dist --mode=development

生产环境:webpack ./src/index.js -o ./dist --mode=production

webpack会以./src/index.js为入口文件开始打包,打包输出到./dist 整体打包环境

配置 webpack.config.js 文件 可以改模式还有 打包生成js文件的名字 

web只能处理js和json的资源 不能出来img/css

生产环境比开发环境多一个压缩js代码

webpack可以帮我们打包js文件,只要指定入口文件(index.js)和输出的文件(bundle.js)还可以处理模块化直接的依赖

四、webpack开发的基本环境配置

webpack.config.js是webpack的配置文件,它告诉webpack干哪个活,当运行weback时,会加载里面的配置

每次打包都要输入出入口非常麻烦可以进行一下设置

初始化node包:npm init

 设置完成后可以直接用webpack进行打包

也可以这样设置

五、什么是loader和它的使用

webpack本身不能对img/css/es6转es5等 但是借助loader进行扩展就可以对这些资源进行打包了

loader的使用:1、通过npm安装

                        2、通过webpack.config.js中的modules关键字下进行配置

css文件的打包

新建一个css文件,然后将css文件引入到入口文件中,然后打包npm run build 会出现错误,因为webpack不能打包css文件,这时候就需要借助loader进行扩展。

首先通过npm进行安装

npm install --save-dev css-loader

然后执行npm run build虽然打包成功,但是样式并没有变,因为css-loader只负责加载css文件并不负责解析,所以还需要安装

npm install --save-dev style-loader

安装完成之后还需要通过webpack.config.js中的modules关键字下进行配置

less文件的打包 

在css文件夹下新增一个less文件,将less文件导入入口文件index.js,

打包时安装

npm install --save-dev less-loader less

在webpack.config.js中进行配置

 然后进行打包就可以了

img文件打包

打包图片的时候可以直接打包,但是不能指定图片的位置,因此需要在webpack.config.js中进行配置,

 html资源的打包

打包html资源的时候需要使用插件

首先安装插件 npm install --save-dev html-webpack-plugin

然后在引入插件 

const HtmlWebpackPlugin = require('html-webpack-plugin');

最后在微博pack.config.js中进行配置 

这样打包就会成功,但是在html中插入图片会发现打包不成功

这个时候需要安装

npm install --save-dev html-loader

安装完成后在webpack.config.js中进行配置

 然后在进行打包就可以了

其他资源的打包(除去html、img、css、less)

可以直接npm run build 进行打包 但是这个打包的位置不是很好

可以在webpack.config.js中进行配置

六、webpack生产环境的基本配置

提取css成单独文件

因为在开发环境中,将css进行打包之后他是包含在打包后的js中的,css不多的时候还行,如果以后写项目有许多css样式就要提取出来成单独的文件

首先先安装:

npm install --save-dev mini-css-extract-plugin

然后在引入

const MiniCssExtractorPlugin = require('mini-css-extract-plugin')

在webpack.config.js中进行配置

 

最后运行就会生成一个css文件

压缩css 

先安装

npm install css-minimizer-webpack-plugin --save-dev

在引入插件

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

 在webpack.config.js中进行配置

js压缩

将mode: 'development'改成 mode: 'production',

html的压缩

css的兼容性

 先安装

npm install --save-dev postcss-loader postcss
npm install --save-dev postcss-preset-env

 配置webpack.config.js

package.json中配置 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Weback是一款免费开源的微信管理系统,它可以协助您管理您的公众微信帐号,通过微信公众互动管理系统的二次开发你可以实现微信和您现有系统的整合,也可以方便的设置自动回复、代码段执行、关键字智能匹配等多种规则, 甚至是完成一个人机交互的对话。 系统特点: 1、按照规则自动回复; 2、执行一段自定义查询代码; 3、按流程交互和流程间跳转; 4、检测内容中关键词和匹配系数; 5、大量API可添加,也可以自己编写; 6、随机、组合、顺序三种方式返回内容; 7、订阅、菜单点击等事件处理; 产品主页:http://weback.wlniao.com 联系人QQ:774115540 使用说明: 一、在系统设置中填写Token; 二、设置微信公众帐号为开发模式,API地址为http://您的域名/wechatapi.aspx 三、测试用户 帐号:admin 密码:admin 2013年4月26日 更新内容 1、修复了界面Bug,并针对平板访问进行了进一步优化,方便大家通过平板或低分辨率的电脑管理微信帐号; 2013年4月25日 更新内容 1、实现了图文、音乐内容的管理及内容状态管理:可用、禁用、测试; 2、实现了内容的随机回复、图文列表回复、顺序回复; 3、实现了为订阅者开启测试功能,开启测试后可以访问状态为测试的规则和内容,此功能主要是为了方便大家维护微信内容; 2013年4月23日 更新内容 1、初步实现了流程跳转机制; 2、增加了对订阅者的备注;
Weback微信互动系统源码 源码描述: 特别声明:之前有同学说我们的代码很多东西都封装了,其实XCore只是一个底层框架,微信互动平台的全部核心代码都是在Weback中的,我们没有进行过任何封装,XCore提供的只是一些常用类库而已,不过我们考虑到XCore里面的东西太多,放进来既让大家看着头疼又会降低编译速度,所以我们在Weback中就只发布了编译版,但是大家可以到https://github.com/wlniao/xcore获取XCore的源码。 Weback是开源的,XCore也是开源的,我们的理念不只是坚持创新,还有乐于分享。Weback从发布至今总共不到一个月的时间,但期间我们已经经历七次更新,每次更新我们都给用户带来了或多或少的惊喜,同时也感谢大家对Weback的支持,然Weback在短短的时间内得到了最快的发展。下一周,我们将带来的是XCore完善的开发教程,分享更多,喜悦更多。 Weback是一款免费开源的微信管理系统,它可以协助您管理您的公众微信帐号,通过微信公众互动管理系统的二次开发你可以实现微信和您现有系统的整合,也可以方便的设置自动回复、代码段执行、关键字智能匹配等多种规则, 甚至是完成一个人机交互的对话。 系统特点: 1、按照规则自动回复; 2、执行一段自定义查询代码; 3、按流程交互和流程间跳转; 4、检测内容中关键词和匹配系数; 5、大量API可添加,也可以自己编写; 6、随机、组合、顺序三种方式返回内容; 7、订阅、菜单点击等事件处理;

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值