- 浏览: 418197 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
xiaomuxingren:
你好,请问update-alternatives --inst ...
JDK8安装及jenkins安装 -
wahahachuang8:
我觉得这种东西自己开发太麻烦了,就别自己捣鼓了,找个第三方,方 ...
HTML5 WebSocket -
晨曦的朝阳:
刚好有需求,学习一下!
MySql主从配置 -
mfkvfn:
这是恶意的商业竞争呀
解决 android 微信5.0及后续版本无法打开电话号码的问题 -
fwyhf:
require('./monitor/module_liste ...
NodeJS Server 进程自动重启
近期react及vueJs的普及,ES6也有相应的推广及普及,前端的开发模式发生较大的改变。
基于此,开发提供webpack的支持,使开发能及时跟进前端的快速变化,保证项目开发与较新的技术接轨,提高开发效率。
1、安装nodeJS
https://nodejs.org/en/
nodeJS是基础运行环境,默认下载最新版本即可,提供对npm的支持
2、初始化工程
npm init
过程可以按照需要填写相应的配置信息,默认生成package.json文件(其中devDependencies中的babel后续内容讲解)
此文件中 scripts 非常重要,可以直接使用 npm test直接跑scripts中的test命令
(1)添加 "start": "webpack-dev-server --devtool eval --progress"
可以使用使用 npm start 直接启动服务器,保证webpack-dev-server启动默认的webpack.config.js,如果不用名称“start”则需要加上 npm run ***
(2)再添加
"build-common": "webpack-dev-server --devtool eval --progress --config webpack.common.config.js"
// 指定配置文件为webpack.common.config.js,如此可以保证可以多个任务同时执行,保证多个任务同时进行,可以按需要生成不同类型的文件
(3)参数 --content-base ./common-build 用于指定当前的webpack的基础目录,能同时处理不同的目录的文件,如此实现只要在一个工程里面配置和安装webpack相关的配置即可,而并不需要安装多个
3、示例工程目录webpack-test
/es6
-- main.js
-- Person.js
index.html
webpack.config.js
4、安装webpack
npm install -g cnpm --registry=https://registry.npm.taobao.org
// 使用淘宝的镜像cnpm,用于代理网络上的一些插件到国内,加快下载速度
cnpm install webpack -g // 全局加载webpack
cnpm install webpack-cli -g //全局加载webpack-cli
cnpm install webpack-dev-server -g // 全局加载服务器,支持实时更新
cnpm install babel-core --save-dev // 开发环境babel-core
cnpm install babel-loader --save-dev // 开发环境babel-loader
cnpm install babel-preset-es2015 --save-dev // 安装ES2015转码规则
cnpm install webpack --save-dev // 一般都会用到webpack,开发环境出也依赖,否则require('webpack')会报错
babel的介绍可参考阮一峰的文章:http://www.ruanyifeng.com/blog/2016/01/babel.html
5、webpack配置文件webpack.config.js
(1)entry入口文件:可以为数组对象,提供打包多个文件的可能。
如 {
"index": ["main1.js", "main2.js", "main3.js"],
"goods": ["goods1.js", "goods2.js", "goods3.js"]
}
(2)output输出文件:[name]/[name].js // 可以选择为通用的生成名字,如此可以保证引用的文件的正确性
loaders为加载器,加载器可以参考链接 http://webpack.github.io/docs/list-of-loaders.html
(3)devServer为webpack-dev-server服务器的开发环境和端口设置等
6、各文件内容详解
Person.js
main.js
index.html
7、打成多文件示例
新增main2.js
修改webpack.config.js
此时打出 main.js 和 main2.js(根据entry的key输出的)
index.html引用如下:
8、安装插件,支持目录构建
CommonsChunkPlugin 用于抽取通用的JS,保证JS的正确性,此插件可以用多可,生成多个通用文件
BannerPlugin 助于向文件添加注释
UglifyJsPlugin 开启代码压缩,在正式环境中使用
9、实际使用中
请将开发环境和正式环境分开,保证在正式环境的文件是最小的,效率最高;而在测试环境,则是最大化文件,易于调试
10、工具
html-loader的使用,可以在页面中使用include标签进行引用,实现对header及footer的引用,如
DefinePlugin 的使用,可以用于模板文件中的变量替换
11、资源拷贝
copy-webpack-plugin
安装
cnpm install --save-dev copy-webpack-plugin
引入
const CopyWebpackPlugin = require('copy-webpack-plugin');
使用
new CopyWebpackPlugin([{
from : "res/js/element-ui",
to : "js/element-ui"
}])
需要弄懂的 webpack
优化
环境配置:压缩文件
代码分割:splitChunks 分割引用的js块
https://blog.51cto.com/13869008/2164811
https://www.jianshu.com/p/fba5ebfdd975
参考文章:
webpack 环境变量配置 dotenv
https://blog.csdn.net/sinat_41212418/article/details/121915239
https://www.jianshu.com/p/a76f15870a73
https://www.jianshu.com/p/1fc5b5151abf 搭建基于webpack4.0的vue项目,这篇文章就够了
http://www.runoob.com/w3cnote/webpack-tutorial.html
https://www.cnblogs.com/vajoy/p/4650467.html
https://segmentfault.com/a/1190000003970448
http://www.jianshu.com/p/42e11515c10f
http://www.jianshu.com/p/a64735eb0e2b
http://web.jobbole.com/86984/
webpack参数详解:
https://www.cnblogs.com/little-ab/articles/6953904.html
webpack之html-webpack-plugin用于生成html文件,非常的有用:
https://www.cnblogs.com/kerry-xu/p/6384436.html
webpack中文文档:
https://webpack.docschina.org/
webpack常用插件:
https://www.jianshu.com/p/fceb2ef5607d
ajax请求axios
https://www.runoob.com/vue2/vuejs-ajax-axios.html
https://blog.csdn.net/qq_30631063/article/details/107099336
基于此,开发提供webpack的支持,使开发能及时跟进前端的快速变化,保证项目开发与较新的技术接轨,提高开发效率。
1、安装nodeJS
https://nodejs.org/en/
nodeJS是基础运行环境,默认下载最新版本即可,提供对npm的支持
2、初始化工程
npm init
过程可以按照需要填写相应的配置信息,默认生成package.json文件(其中devDependencies中的babel后续内容讲解)
{ "name": "webpack-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "haiyupeter", "license": "ISC", "devDependencies": { } }
此文件中 scripts 非常重要,可以直接使用 npm test直接跑scripts中的test命令
(1)添加 "start": "webpack-dev-server --devtool eval --progress"
可以使用使用 npm start 直接启动服务器,保证webpack-dev-server启动默认的webpack.config.js,如果不用名称“start”则需要加上 npm run ***
(2)再添加
"build-common": "webpack-dev-server --devtool eval --progress --config webpack.common.config.js"
// 指定配置文件为webpack.common.config.js,如此可以保证可以多个任务同时执行,保证多个任务同时进行,可以按需要生成不同类型的文件
(3)参数 --content-base ./common-build 用于指定当前的webpack的基础目录,能同时处理不同的目录的文件,如此实现只要在一个工程里面配置和安装webpack相关的配置即可,而并不需要安装多个
3、示例工程目录webpack-test
/es6
-- main.js
-- Person.js
index.html
webpack.config.js
4、安装webpack
npm install -g cnpm --registry=https://registry.npm.taobao.org
// 使用淘宝的镜像cnpm,用于代理网络上的一些插件到国内,加快下载速度
cnpm install webpack -g // 全局加载webpack
cnpm install webpack-cli -g //全局加载webpack-cli
cnpm install webpack-dev-server -g // 全局加载服务器,支持实时更新
cnpm install babel-core --save-dev // 开发环境babel-core
cnpm install babel-loader --save-dev // 开发环境babel-loader
cnpm install babel-preset-es2015 --save-dev // 安装ES2015转码规则
cnpm install webpack --save-dev // 一般都会用到webpack,开发环境出也依赖,否则require('webpack')会报错
babel的介绍可参考阮一峰的文章:http://www.ruanyifeng.com/blog/2016/01/babel.html
5、webpack配置文件webpack.config.js
var path = require('path'); module.exports = { entry: "./es6/main.js", output: { path: __dirname, filename: "bundle.js" }, //设置开发者工具的端口号,不设置则默认为8080端口 devServer: { inline: true, port: 8181 }, module: { rules: [ { test: path.join(__dirname, 'es6'), loader: 'babel-loader', query: { presets: ['es2015'] } } ] } }
(1)entry入口文件:可以为数组对象,提供打包多个文件的可能。
如 {
"index": ["main1.js", "main2.js", "main3.js"],
"goods": ["goods1.js", "goods2.js", "goods3.js"]
}
(2)output输出文件:[name]/[name].js // 可以选择为通用的生成名字,如此可以保证引用的文件的正确性
loaders为加载器,加载器可以参考链接 http://webpack.github.io/docs/list-of-loaders.html
(3)devServer为webpack-dev-server服务器的开发环境和端口设置等
6、各文件内容详解
Person.js
class Person{ constructor(name, age) { this.name = name; this.age = age; } say() { return '我是' + this.name + ',我今年' + this.age + '岁了。'; } } export default Person;
main.js
import Person from './Person.js'; let p = new Person('张三3', 20); document.write(p.say());
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test es6</title> </head> <body> <script src="bundle.js"></script> </body> </html>
7、打成多文件示例
新增main2.js
import Person from './Person.js'; let p = new Person('李四', 20); document.write(p.say());
修改webpack.config.js
var path = require('path'); module.exports = { entry: { "main": ["./es6/main.js"], "main2": ["./es6/main2.js"] }, output: { path: __dirname, filename: "[name].js" }, module: { loaders: [ { test: path.join(__dirname, 'es6'), loader: 'babel-loader', query: { presets: ['es2015'] } } ] } }
此时打出 main.js 和 main2.js(根据entry的key输出的)
index.html引用如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test es6</title> </head> <body> <script src="main.js"></script> <script src="main2.js"></script> </body> </html>
8、安装插件,支持目录构建
plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: "vendor", // filename: "vendor.js" // (给 chunk 一个不同的名字) minChunks: Infinity // (随着 entry chunk 越来越多, // 这个配置保证没其它的模块会打包进 vendor chunk) }), new webpack.BannerPlugin('此处理为打注释专用'), // 启动压缩 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ]
CommonsChunkPlugin 用于抽取通用的JS,保证JS的正确性,此插件可以用多可,生成多个通用文件
BannerPlugin 助于向文件添加注释
UglifyJsPlugin 开启代码压缩,在正式环境中使用
9、实际使用中
请将开发环境和正式环境分开,保证在正式环境的文件是最小的,效率最高;而在测试环境,则是最大化文件,易于调试
10、工具
html-loader的使用,可以在页面中使用include标签进行引用,实现对header及footer的引用,如
// 添加 cnpm install html-loader --save-dev <%=require('html-loader!./header.html')%>
DefinePlugin 的使用,可以用于模板文件中的变量替换
11、资源拷贝
copy-webpack-plugin
安装
cnpm install --save-dev copy-webpack-plugin
引入
const CopyWebpackPlugin = require('copy-webpack-plugin');
使用
new CopyWebpackPlugin([{
from : "res/js/element-ui",
to : "js/element-ui"
}])
需要弄懂的 webpack
优化
环境配置:压缩文件
代码分割:splitChunks 分割引用的js块
https://blog.51cto.com/13869008/2164811
https://www.jianshu.com/p/fba5ebfdd975
参考文章:
webpack 环境变量配置 dotenv
https://blog.csdn.net/sinat_41212418/article/details/121915239
https://www.jianshu.com/p/a76f15870a73
https://www.jianshu.com/p/1fc5b5151abf 搭建基于webpack4.0的vue项目,这篇文章就够了
http://www.runoob.com/w3cnote/webpack-tutorial.html
https://www.cnblogs.com/vajoy/p/4650467.html
https://segmentfault.com/a/1190000003970448
http://www.jianshu.com/p/42e11515c10f
http://www.jianshu.com/p/a64735eb0e2b
http://web.jobbole.com/86984/
webpack参数详解:
https://www.cnblogs.com/little-ab/articles/6953904.html
webpack之html-webpack-plugin用于生成html文件,非常的有用:
https://www.cnblogs.com/kerry-xu/p/6384436.html
webpack中文文档:
https://webpack.docschina.org/
webpack常用插件:
https://www.jianshu.com/p/fceb2ef5607d
ajax请求axios
https://www.runoob.com/vue2/vuejs-ajax-axios.html
https://blog.csdn.net/qq_30631063/article/details/107099336
发表评论
-
webpack4 - 安装
2019-04-15 17:50 0webpack4 安装 -
PIXI 完整示例-PIXI文档翻译(7)
2017-02-27 10:04 900案例研究:寻宝者 所 ... -
PIXI 碰撞检测-PIXI文档翻译(6)
2017-02-27 09:59 1771你现在知道如何制作各种各样的图形对象,但你能用他们做什么?一个 ... -
PIXI 基本图形-PIXI文档翻译(6)
2017-02-26 18:06 29291、基本图形 使用图像纹理是制作精灵的最有用的方法之一,但Pi ... -
PIXI 分组 Sprite-PIXI文档翻译(5)
2017-02-26 11:55 13841、分组sprite 组可以创建游戏场景,并将类似的精灵一起管 ... -
PIXI 移动 Sprite-PIXI文档翻译(4)
2017-02-26 11:38 1319你现在知道如何显示精灵,但是你怎么让他们移动?这很容易:使用创 ... -
PIXI 创建 Sprite的几种方法-PIXI文档翻译(3)
2017-02-26 11:25 55771、通过spritesheets图创建sprite 你现在知 ... -
PIXI Sprite的定位,尺寸和旋转-PIXI文档翻译(2)
2017-02-26 00:14 59121、定位Sprite 现在你知道如何创建和显示精灵,让我们了解 ... -
PIXI入门-PIXI文档翻译(1)
2017-02-25 09:47 35051、创建渲染器和舞台 ... -
如何快速的开放一个小游戏
2016-11-02 20:50 01、找一个可用的框架 2、通读一下文档和源码 3、搞一个小创意 ... -
生产环境页面性能监控
2013-04-18 00:46 1881嵌入式的开发 在代码片断中嵌入各个时间点,最后统一上报。 一 ... -
XSS攻击原理解析
2013-04-16 23:49 2665XSS全称Cross Site Script,跨站脚本攻击 它 ... -
CRSF攻击原理解析
2013-04-16 23:02 7908CRSF全称 Cross Site Request Forge ... -
浏览器缓存机制详解(转)
2013-03-27 21:59 1475同时参考的是W3C RFC2616规范中的 HTTP1.1/H ... -
页面性能优化
2013-03-27 21:56 1832压缩JS,CSS,图片 合并 ... -
JavaScript异常监控
2013-03-27 21:50 2212JavaScript异常一般可通过try ca ... -
HTML5 geolocation 规范翻译
2013-04-22 13:32 1894摘要 规范定义了脚本方式访问主机地理位置信息的API。 安全 ... -
JS文档构建(jsdoc)
2012-06-07 02:08 1661一、命令分类 类定义 @class 类型定义 @ve ... -
HTML5 Forms
2012-06-03 22:16 1232表单元素类型 常用:tel, email, date, url ... -
HTML5 WebSocket
2012-06-02 11:12 24231.WebSocket的优缺点 大 ...
相关推荐
webpack 中使用vue开发项目,webpack 中使用vue开发项目,webpack 中使用vue开发项目,webpack 中使用vue开发项目,webpack 中使用vue开发项目
基于webpack5构建的vue3项目,可用来学习webpack5的常用配置,和常见优化。https://webpack.docschina.org/plugins/image-minimizer-webpack-plugin/#root。 基于webpack5构建的vue3项目,可用来学习webpack5的常用...
webpack多页面项目配置
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图: 打开控制台查看元素样式,发现在开发环境的时候”微软雅黑”被解析成unicode编码并且带着双引号, 但使用...
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现 背景 公司代码提供给第三方使用,为了不完全泄露源码,需要对给出的代码进行加密混淆,前端代码虽然无法做到完全加密混淆,但是通过使用 webpack-...
Webpack2在项目中的配置实践
适宜人群:想要学习 webpack 配置的,各个版本之间出现问题的,想要解决各种配置报错的,想要 vue2 + webpack5 成功创建项目的都可以; 小记:这只是配置的 package.json 文件,更有配置好的 webpack.config.js ...
Webpack插件来检测未使用的文件和使用的文件中未使用的导出
vue2+webpack搭建h5框架
随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而webpack就是用于将前端各种文件打包起来。一个简单的webpack应该包含以下几个概念 入口起点 输出 配置 组件 加载器 插件 模块 模块热...
cesium使用webpack搭建react项目
vue2.6+webpack5+typescript环境搭建
使用webpack进行vue项目练习
8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 ...
目前可以使用webpack5不过还是建议使用webpack4 npm i webpack@4.44.2 webpack-cli@3.3.11 -D 3.配置webpack 1.根目录下创建config文件夹,分别创建webpack.base.config.js,webpack.dev.config.js,webpack.prod....
本文介绍了如何使用webpack在vue项目中写jsx语法,分享给大家,具体如下: 我们知道Vue 2.0中对虚拟DOM的支持。我们可以通过JavaScript动态的创建元素,而不用在template中写HTML代码。虚拟DOM最终将被渲染为真正的...
gulp-webpack-demo, 构建多页面前端项目的gulp webpack 收费为磅。0版本的webpack。现在webpack已经更新到2.0 ,更多新功能和修改请参考官网 。项目相关文章说明请见吞噬 web pack构建多页面前端项目安装依赖包:npm...
06_2_5_webpack的基础配置 07_2_6_将webpack命令配置到package_json 08_2_7_watch模式 09_2_8_webpack_dev_server的基本使用 10_2_9_html_webpack_plugin的使用_html插件_ 11_2_10_webpack_dev_middleware的...
webpack的搭建和项目的整体的构架
主要介绍了在 Laravel 项目中使用 webpack-encore的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下