构建前端自动化工作流环境
目标:建一个自动化工作流环境
自动编译
自动合并
自动刷新
自动部署
工作流:
1 全局安装webpack
执行命令:
npm install webpack webpack-cli -g
其中webpack-cil 是命令接口工具
2 初始化当前项目:npm init
然后一路回车即可
3 为了避免冲突,我们再进行局部安装:npm install webpack webpack-cli --save -d
说明:安装到了开发环境下的工具
打开项目文件夹,发现多了两个文件:
也多了一个文件夹:
当传文件时,可以将该文件夹删除,在新的项目中,执行:npm install 他将会帮忙将所有依赖全部下载下来;
4 执行 webpack:
报错如下
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.
这是因为需要一个入口文件,默认是从src 下的index.js文件为 入口文件
这时需要新建一个src 文件夹下,然后新建一个index.js 的入口文件;
重新执行没有再报错:
这时候需要额外了解 webpack的4个核心概念:
入口 (entry)
出口 (output)
loader 解析器
插件 (plugins)
5 规定webpack处理打包方式——
有两种方式:1shell 语句的方式 例如手动命令行写入: webpack --mode=development 配置文件为开发环境
2 配置文件的方式 ,新建一个webpack.config.js 的文件,然后将配置要求写入该文件中,以本次项目为例,webpack.config.js 文件内容如下:
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: {
index: './src/js/meituan.js',
goodsInfo: './src/js/goodsInfo.js'
},
output: {
filename: '[name].js',
path: __dirname '/out',
// publicPath: 'http://localhost:8080/out',
},
module: {
rules: [
{test: /.js$/, use: ['babel-loader']},
{test: /.(jpg|png|gif|svg|ttf|woff|eot)$/, use: ['url-loader?limit=1000&name=./[name].[ext]']},
{test: /.css$/, use: ['style-loader', 'css-loader']}
]
},
plugins: [
new UglifyJSPlugin(),
],
mode: 'development'
入口文件中需要配置依赖::
require('../css/reset.css');require('../plug/css/swiper.min.css');require('../webfont/iconfont.css');require('../css/meituanIndex.css');
然后我们发现,每次修改完文件后都需要重新执行下打包 ;
webpack
6 这样很不方便,因此我们可以开启一个监听: webpack --watch
这样每次修改完文件后不需要重新打包~!有木有很方便
7 更神奇的是webpack还可以帮我们开启一个服务器:webpack-dev-server
需要执行如下命令先安装下webpack-dev-server:
npm install webpack-dev-server -D
然后执行:webpack-dev-server 会自动开启一个端口
8 应用loader:
module: {
rules: [
{test: /.js$/, use: ['babel-loader']},
{test: /.(jpg|png|gif|svg|ttf|woff|eot)$/, use: ['url-loader?limit=1000&name=./[name].[ext]']},
{test: /.css$/, use: ['style-loader', 'css-loader']}
]
},
需要用到三个解析器
npm install file-loader html-loader extract-loader -D
html-loader:
{
test:/ \.html$/,
use:[
//单独抽离的html 文件进行配置
{
loader: ' file-loader',
options:{
name:'index.html'
}
},
//单独抽离
{
loader:‘extract-loader’
},
//找到html 文件
{
loader: ' html-loader'
}
]
}
8 安装插件
压缩js:
npm install uglifyjs-webpack-plugin -D
然后在webpack-config.js 下添加引用:
压缩CSS 的插件
首先安装
npm install mini-css-extract-plugin -D
简单工作流程:
初始化 ——>编译——>输出—如果文件发生变化—>重新编译——输出
下一期随笔写: 熟练使用less/sass
更多专业前端知识,请上 【猿2048】www.mk2048.com
构建前端自动化工作流环境相关推荐
- Gulp构建前端自动化工作流
## Gulp构建前端自动化工作流 ### Gulp构建前端自动化工作流之:常用插件介绍及使用 在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
构建一个基本的前端自动化开发环境 -- 基于 Gulp 的前端集成解决方案(四) 参考文章: (1)构建一个基本的前端自动化开发环境 -- 基于 Gulp 的前端集成解决方案(四) (2)https: ...
- 前端自动化工作流_当每项工作都自动化时
前端自动化工作流 App developer. Social media manager. Personal trainer. No person on Earth could have predic ...
- 前端自动化开发工作流模板
作者:戴嘉华 转载请注明出处,保留原文链接和作者信息 1. 前端自动化工作流简介 每种项目都有自己特定的开发流程.工作流程.从需求分析.设计.编码.测试.发布,一个整个开发流程中,会根据不同的情况形成 ...
- 前端自动化开发工作流
1. 前端自动化工作流简介 每种项目都有自己特定的开发流程.工作流程.从需求分析.设计.编码.测试.发布,一个整个开发流程中,会根据不同的情况形成自己独特的步骤和流程.一个工作流的过程不是一开始就固定 ...
- 前端自动化构建工具:用Gulp4.0搭建一个基本的前端开发环境
一个项目的完成一般需要经过三个步骤:初始化.开发和部署.在前端开发过程中,我们经常需要依靠一些自动化构建工具来优化前端工作流程,来帮助我们完成一系列繁琐的工作,例如浏览器热更新.ES6编译.代码压缩. ...
- 在Maven+Spring项目中使用Node.js的Gulp进行前端自动化构建
摘要: 在Maven+Spring项目中使用Node.js的Gulp进行前端自动化构建 刚开始打算进行前后端分离开发,后来发现在使用JSP或者Freemarker做动态页面时,想发挥这些自动化构建工具 ...
- 浅谈前端自动化构建 -- Grunt、Gulp、FIS
前言 笔记来源:拉勾教育 大前端高薪训练营 阅读建议:内容较多,建议通过左侧导航栏进行阅读 前端自动化构建 基本介绍 一切重复工作本应自动化.将开发中的源代码,自动化的转换成生产环境中可以运行的程序, ...
- 近期总结:generator-web,前端自动化构建的解决方案
本文结合最近的工作经验,总结出一个较简洁的前端自动化构建方案,主张css和js的模块化,并通过grunt的自动化构建,有效地解决css合并,js合并和图片优化等问题,对于提高前端性能和项目代码质量有一 ...
最新文章
- 清华学霸直博全自主写CPU、操作系统、编译器!刘知远点赞!(附链接)
- Android滑动冲突解决方法
- Ubuntu 启动自动登录
- leetcode 764. Largest Plus Sign | 764. 最大加号标志(Java)
- knex 单表查询_knex.js
- WPF快速入门系列(2)——深入解析依赖属性
- 前端学习(1546):MVC思想
- 【51nod - 1087】 1 10 100 1000(找规律推公式,水,map)
- freemarker java静态方法_java Freemarker页面静态化实例详解
- 现场看女排vs日本了
- 如何新浪微博html5,新浪微博接入Html5游戏 注重轻量碎片化
- NeoKylin7服务器操作系统安装
- SpringBoot基础-refresh方法解析
- spring 事务传播级别
- git push 报错 error: failed to push some refs to ‘git@xxx/xx.git‘
- 中文语音评测之thchs30+gop_speechocean762实现
- PyInstaller 打包单文件 exe 注意事项
- 简述Python数据类型
- 梅科尔工作室-许博利-鸿蒙笔记2
- 软件设计的不同模型:瀑布式、快速原型法、迭代式(敏捷)
热门文章
- MATLAB入门(二)
- tg3269c网卡驱动linux,TP-Link3269C网卡驱动官方版
- python c4.5完整代码_python实现c4.5/Id3自我练习
- asp.net中大文件下载
- pytest单侧模块_入门汇总
- Python黑魔法,一行实现并行化
- mvc的视图中显示DataTable的方法
- 接口自动化 基于python+Testlink+Jenkins实现的接口自动化测试框架
- linux内核分析——扒开系统调用的三层皮(上)
- Block(Closure) Tips