- 浏览: 427634 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
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 1026案例研究:寻宝者 所 ... -
PIXI 碰撞检测-PIXI文档翻译(6)
2017-02-27 09:59 1907你现在知道如何制作各种各样的图形对象,但你能用他们做什么?一个 ... -
PIXI 基本图形-PIXI文档翻译(6)
2017-02-26 18:06 31791、基本图形 使用图像纹理是制作精灵的最有用的方法之一,但Pi ... -
PIXI 分组 Sprite-PIXI文档翻译(5)
2017-02-26 11:55 15221、分组sprite 组可以创建游戏场景,并将类似的精灵一起管 ... -
PIXI 移动 Sprite-PIXI文档翻译(4)
2017-02-26 11:38 1445你现在知道如何显示精灵,但是你怎么让他们移动?这很容易:使用创 ... -
PIXI 创建 Sprite的几种方法-PIXI文档翻译(3)
2017-02-26 11:25 58641、通过spritesheets图创建sprite 你现在知 ... -
PIXI Sprite的定位,尺寸和旋转-PIXI文档翻译(2)
2017-02-26 00:14 61631、定位Sprite 现在你知道如何创建和显示精灵,让我们了解 ... -
PIXI入门-PIXI文档翻译(1)
2017-02-25 09:47 36571、创建渲染器和舞台 ... -
如何快速的开放一个小游戏
2016-11-02 20:50 01、找一个可用的框架 2、通读一下文档和源码 3、搞一个小创意 ... -
生产环境页面性能监控
2013-04-18 00:46 1932嵌入式的开发 在代码片断中嵌入各个时间点,最后统一上报。 一 ... -
XSS攻击原理解析
2013-04-16 23:49 2720XSS全称Cross Site Script,跨站脚本攻击 它 ... -
CRSF攻击原理解析
2013-04-16 23:02 8040CRSF全称 Cross Site Request Forge ... -
浏览器缓存机制详解(转)
2013-03-27 21:59 1527同时参考的是W3C RFC2616规范中的 HTTP1.1/H ... -
页面性能优化
2013-03-27 21:56 1875压缩JS,CSS,图片 合并 ... -
JavaScript异常监控
2013-03-27 21:50 2264JavaScript异常一般可通过try ca ... -
HTML5 geolocation 规范翻译
2013-04-22 13:32 1954摘要 规范定义了脚本方式访问主机地理位置信息的API。 安全 ... -
JS文档构建(jsdoc)
2012-06-07 02:08 1715一、命令分类 类定义 @class 类型定义 @ve ... -
HTML5 Forms
2012-06-03 22:16 1284表单元素类型 常用:tel, email, date, url ... -
HTML5 WebSocket
2012-06-02 11:12 25451.WebSocket的优缺点 大 ...
相关推荐
在Vue项目中使用TypeScript,我们需要在`tsconfig.json`中配置相应的编译选项,比如`allowSyntheticDefaultImports`和`esModuleInterop`,以便与CommonJS和ES模块兼容。 4. **项目结构**: - `vue-shim.d.ts`: 这...
适宜人群:想要学习 webpack 配置的,各个版本之间出现问题的,想要解决各种配置报错的,想要 vue2 + webpack5 成功创建项目的都可以; 小记:这只是配置的 package.json 文件,更有配置好的 webpack.config.js ...
在这个主题中,我们将深入探讨如何利用Webpack插件来检测未使用的文件以及在已使用的文件中查找未使用的导出。 首先,Webpack 插件是扩展Webpack功能的关键组成部分,它们通过在Webpack构建生命周期中的不同阶段...
本实践将深入探讨如何在实际项目中配置和使用 Webpack 2。 一、Webpack 2 的核心概念 1. **Entry(入口)**:定义项目的起点,Webpack 会从这些入口点开始构建依赖图。在 `webpack.config.js` 文件中,你可以设置...
Webpack 是一个流行的模块打包工具,尤其在JavaScript开发中被广泛使用。在单页面应用(SPA)的场景下,Webpack 的使用已经相当成熟,但当面对多页面应用(MPA)时,配置会稍微复杂一些。本篇文章将深入探讨如何设置...
19. **docs**:这个目录可能包含了 Webpack 5 的文档,包括使用教程、配置参考等,对于学习和理解 Webpack 5 的工作原理非常有用。 总的来说,Webpack 5 提供了一个强大的工具链,用于构建现代 JavaScript 应用程序...
要使用 `webpack-dev-server`,首先需要安装它作为项目的开发依赖: ```bash npm install --save-dev webpack-dev-server ``` 然后,在 `webpack.config.js` 配置文件中添加 `devServer` 配置项: ```javascript ...
2. **初始化项目**:使用Vue CLI创建一个新的Vue项目,可以选择webpack模板。 3. **配置Webpack**:根据项目需求,自定义Webpack配置,例如设置别名、调整输出路径、引入加载器等。 4. **创建Vue组件**:根据项目...
基于webpack5构建的vue3项目,可用来学习webpack5的常用配置,和常见优化。https://webpack.docschina.org/plugins/image-minimizer-webpack-plugin/#root。 基于webpack5构建的vue3项目,可用来学习webpack5的常用...
5. **优化输出(Optimization)**:包括压缩代码(使用 `TerserWebpackPlugin`)、提取CSS到单独文件(使用 `MiniCssExtractPlugin`)以及优化图片(使用 `image-webpack-loader`)。 6. **多入口配置(Multiple ...
在现代Web开发中,为了提高开发效率和优化网站性能,开发者经常使用Webpack这一强大的模块打包工具。本项目以HTML、JavaScript和CSS为基础,结合Webpack进行资源的管理和打包,使得项目结构清晰,易于理解和维护。...
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图: 打开控制台查看元素样式,发现在开发环境的时候”微软雅黑”被解析成unicode编码并且带着双引号, 但使用...
在Webpack5中,这些概念依然重要,但有了新的升级。例如,新的"entry"配置支持动态导入,这允许我们在运行时按需加载模块,从而减少初始加载时间。而"output"的改进则体现在更好的文件命名策略和公共路径优化,使...
在Vue3项目中使用TypeScript,可以增强组件和项目的可维护性。 **Sass/SCSS** 是一种预处理器,扩展了CSS语法,增加了变量、嵌套规则、混合(mixins)等功能,使CSS编写更具有可维护性和可扩展性。 **Webpack** 是...
通过全局安装 Webpack 和 Webpack CLI,可以在任何项目中使用它们: ```bash npm install -g webpack webpack-cli ``` 对于项目内部的依赖,需要在项目根目录创建 `package.json` 文件,然后局部安装 Webpack 和 ...
此外,Webpack 5还关注了开源项目的可持续性,通过改进贡献者激励机制,鼓励更多的人参与到项目中,使得社区更加活跃,问题能得到更快的响应和解决。 Webpack 5 的发布,对于开发者来说,不仅带来了性能上的提升,...
手把手搭建h5框架,webpack+jq 与webpack +vue。...1.初始化一个npm项目 2.安装pnpm 3.安装webpack webpack-cli 4.新建webpack.config.js配置文件 5.安装babel 详细安装方式,手把手教程见README.md文档
使用vue3 +webpack5 + pina搭建的基础版前端项目。内容详细,包含配置注释等。配合文档(https://blog.csdn.net/qq_32768761/article/details/138844547?spm=1001.2014.3001.5501)实现从vue3创建项目,使用webpack5...
在Vue项目中,配置`webpack-obfuscator`的方法取决于你使用的是Vue CLI的哪个版本。 对于Vue CLI 3.x或更高版本,你可以在`vue.config.js`文件中进行配置: ```javascript const path = require('path'); var ...
本文将深入探讨一些使用Webpack的提示和技巧,以提升开发效率和项目性能。 1. **配置文件理解**: Webpack 的核心在于其配置文件 `webpack.config.js`。配置文件允许你定义输入、输出、加载器、插件等一系列参数,...