- 浏览: 449930 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
ubuntu的疯狂:
推荐一份完整的教程:http://blog.ddlisting ...
Emberjs学习 -
ptz19:
请问,如果把合并前的文件,不要dest 目标目录来。如: js ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
楼主,还有个问题,<a href="" ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
感谢楼主,用到了您的代码, 但现在好像有改动 否则会报错:修改 ...
gulp下静态资源的合并、压缩、MD5后缀 -
denverj:
感谢分享~
Emberjs学习
:arrow: 1. 纯前端的打包输出,比较有局限 2.目录结构 |--build |--app |--base //基础核心文件,譬如jQuery,公共Util等 |--css |--images |--plugins //jQuery插件 |--jquery.lazyload.js |--page //功能页面模块,每个模块至少包含一个和文件夹同名的js,作为打包入口 |--common |--orderCommon.js |--xxx.js |--orderDetail |--orderDetail.js |--orderList |--orderList.js |--search |--search.js |--searchHelper.js |--abc |--abc.js |--vendor.js // 全站公用文件
//vendor.js import $ from 'jQuery'; import "plugins/jquery.lazyload"; import Util from "app/base/Util"; require('app/css/page/global.css'); //orderDetail.js import Util from "app/base/Util"; var orderCommon = null; var orderDetail = { init: function(){ // } }; //异步加载,确保orderCommon将被分割为单独文件加载 require.ensure(['app/page/common/orderCommon'],function(orderCommon){ orderCommon = orderCommon; orderDetail.init(); });
//webpack.config.js
var webpackDevHost = 'localhost' var path = require('path'), webpack = require('webpack'), ExtractTextPlugin = require('extract-text-webpack-plugin'), Clean = require('clean-webpack-plugin'), HtmlWebpackPlugin = require('html-webpack-plugin'); var glob = require('glob'); var AssetsPlugin = require('assets-webpack-plugin'); const BUILD_DIRECTORY = 'build'; const BUILD_DROP_PATH = path.resolve(__dirname, BUILD_DIRECTORY); var ENV_PRO = false; var entry = (function getEntry(){ var entry = {}; var result = glob.sync(path.join('./app/page', '**/*.js')); //获取page下目录,符合 page/xxx/xxx.js 的,将被视为entry入口。 result.forEach( function(name) { var folder = name.split('/')[2], filename = name.split('/')[3]; if(folder !== 'common' && folder + '.js' === filename){ entry[name.split('/').pop().split('.').shift()] = name; } }); //额外的附加入口 entry.vendor = './app/page/vendor.js'; entry.jqueryui = './app/page/jqueryui.js'; // console.log(JSON.stringify(entry)); return entry; })(); module.exports = { // devtool: 'eval', // 'webpack-dev-server/client?http://' + webpackDevHost + ':' + webpackDevPort, // 'webpack/hot/only-dev-server', entry: entry, output: { path: path.join(__dirname, './build2'), filename: ENV_PRO ? '[name].[chunkhash].js': '[name].js', chunkFilename: ENV_PRO ? "[id].[chunkhash].js" : '[id].js', pathinfo: ENV_PRO ? true : false, publicPath: 'http://192.168.91.250:1234/build2/' }, plugins: [ // new webpack.HotModuleReplacementPlugin(), // new webpack.NoErrorsPlugin() new Clean(['build2']) // ,new webpack.ProvidePlugin({ // $: "jquery", // jQuery: "jquery", // "window.jQuery": "jquery" // }) ,new ExtractTextPlugin( ENV_PRO ? "[name].[hash].css" : '[name].css') // ,new webpack.optimize.CommonsChunkPlugin({ // name: "c-commons", // chunks: ["orderDetail", "orderList"] // }) ,new webpack.optimize.CommonsChunkPlugin({ name: "vendor", filename: ENV_PRO ? 'vendor.[chunkhash].js' : 'vendor.js' ,minChunks: Infinity }) ,new AssetsPlugin({ filename: 'webpack.assets.json', path: path.join(__dirname, './build2'), prettyPrint: true }) // ,new uglifyJsPlugin({ // compress: { // warnings: false // } // }) ], resolve: { alias: { app: path.join(__dirname, '/app'), base: path.join(__dirname, '/app/base'), page: path.join(__dirname, '/app/page'), plugins: path.join(__dirname, '/app/plugins'), jquery: path.join(__dirname, '/app/base/jquery.pack.js'), jQuery: path.join(__dirname, '/app/base/jquery.pack.js'), $: path.join(__dirname, '/app/base/jquery.pack.js') }, extensions: ['', '.js', '.jsx'] }, module: { loaders: [{ test: /jquery.pack.js/, loader: 'expose?$!expose?jQuery!' },{ test: /plugins\/jquery\..+\.js$/, loader: 'imports?jQuery=jquery,$=jquery,this=>window' },{ test: /\.(js|jsx)$/, exclude: /(node_modules)/, loader: 'babel?presets[]=es2015,presets[]=stage-3' },{ test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader",'css-loader!sass-loader') }, { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader",'css-loader') },{ test: /\.(jpe?g|png|gif)$/, loader: 'url?limit=8192&name=images/[hash].[ext]' }, { test: /\.(woff|woff2|eot|ttf|svg)$/, loader: 'url?limit=8192' }, { test: /\.html/, loader: 'raw' }, { test: /\.json/, loader: 'json' }] } }
package.json
{ "name": "site_pc", "repository": "", "version": "1.1.0", "main": "webpack.config.js", "scripts": {}, "license": "ISC", "devDependencies": { "assets-webpack-plugin": "^3.3.0", "babel-core": "^6.1.21", "babel-loader": "^6.1.0", "babel-polyfill": "^6.3.14", "babel-preset-es2015": "^6.1.4", "babel-preset-stage-3": "^6.1.2", "clean-webpack-plugin": "^0.1.4", "css-loader": "^0.23.0", "es6-promise": "^3.0.2", "expose-loader": "^0.7.1", "imports-loader": "^0.6.5", "extract-text-webpack-plugin": "^0.9.1", "html-loader": "^0.3.0", "html-webpack-plugin": "^1.6.2", "imports-loader": "^0.6.5", "json-loader": "^0.5.3", "nib": "^1.1.0", "node-sass": "^3.4.2", "raw-loader": "^0.5.1", "sass-loader": "^3.1.2", "style-loader": "^0.13.0", "url-loader": "^0.5.6", "webpack": "^1.12.4", "webpack-dev-server": "^1.12.1", "webpack-manifest-plugin": "^1.0.0" } }
发表评论
-
grunt构建基于seajs的网站实现
2015-06-16 16:49 1131Gruntfile.js module.exports ... -
js平滑滚动回到顶部
2015-06-10 11:42 4019优先使用 requestAnimationFrame实现。 实 ... -
fis-amd 的使用与修改
2015-05-26 16:14 3959https://github.com/fex-team/fis ... -
scrollMagic 视差与滚动动画GSAP
2015-05-19 18:14 4455scrollMagic(https://github.com/ ... -
skrollr-视差滚动动画插件
2015-05-19 14:18 1747skrollr ( https://github.com/Pr ... -
stellar插件的使用
2015-05-18 17:30 1806<!DOCTYPE html> < ... -
icon font VS svg font
2015-05-14 15:21 1217关于字体图标和SVG图标,CSS TRICK网站有较好的说明。 ... -
gulp下静态资源的合并、压缩、MD5后缀
2015-05-05 15:48 22640var gulp = require('gulp'); ... -
DOMContentLoaded VS onload VS onreadystatechange
2015-04-30 14:50 70171. DOMContentLoaded 在页面html、scr ... -
简单的css3全屏滚动
2015-04-27 16:41 1456<!DOCTYPE html> <ht ... -
jquery插件treetable 的使用
2015-04-20 16:12 12011插件的文档写得不是很好,为了能弄出异步加载的功能,小折腾了一番 ... -
sublime 侧边栏字体大小修改
2015-04-16 10:46 3839【转载自:http://jekhy.com ... -
移动端的“点透”问题
2015-04-15 14:13 1664移动端的“点透”问题,这篇博文有较好的说明: http://w ... -
scheme缺少,ie的bug
2015-04-01 17:34 535在页面上定位一个资源(JS/CSS/image),通常的url ... -
大整数相加
2015-03-26 22:18 942function repeatStr(ch, n){ ... -
getBoundingClientRect 跨浏览器实现
2015-03-18 18:30 1134<head> <script ... -
window.name 跨域
2015-03-18 17:29 905window.name跨域的基础是:iframe页面在其url ... -
window.name 跨域
2015-03-18 17:27 1window.name跨域的基础是:iframe页面在其ur ... -
HTML History API
2015-03-13 18:05 1141// 替换当前浏览器history的最后一项记录。 hi ... -
爬取网站的图片之一
2015-03-05 18:12 900var http = require('http' ...
相关推荐
为解决此问题,"3我的解决办法是在模版手动编辑输入vue、react包和对应的UI框架,以减少vendor包的大小.txt"提出了一个策略:手动调整引入的库,只打包PC或移动设备所需的特定UI框架。 针对这种情况,Webpack 提供...
而Webpack则是一个模块打包器,它可以将各种资源(如JavaScript、CSS、图片等)视为模块,进行管理和打包,为现代前端应用提供强大的构建能力。 标题“vue+webpack 做Pc多页开发”暗示我们将探讨如何利用Vue.js和...
4. **webpack**:Webpack 是一个模块打包器,用于管理和构建前端资源。它将各种模块(如JavaScript、CSS、图片等)打包成一个或多个文件,便于浏览器加载和执行。Webpack 提供了丰富的插件系统,可以进行代码分割、...
这是一个使用React、TypeScript和Webpack构建的旅游网站项目,涵盖了前端开发中的多个核心知识点。以下是对这个项目中涉及技术的详细解析: 1. **React**: - React是Facebook开发的JavaScript库,用于构建用户...
Webpack是现代JavaScript应用程序的重要模块打包工具,它能够将各种资源(如JavaScript、CSS、图片等)打包成优化过的静态文件,便于部署和运行。Webpack 3.x版本在此基础上提升了性能和优化了一些配置项,使得...
app打包技术是用工具一键打包成APP,也可以通过eclipse本地打包(本地打包是有添加Android sdk包的需求,这里没有介绍,只是简单构建使用,本地打包工程文件如需可以索取) 。这些都是提供一整套技术解决方案。 说明...
"基于webpack的前端工程化多页面入口IE8和移动端开发手脚架" 提供了一种解决方案,旨在支持老旧的 IE8 浏览器,同时兼容 PC 和移动端的开发需求。 首先,让我们了解一下什么是 Webpack。Webpack 是一个静态模块打包...
### 打包 ``` npm run build ``` ### 代码的 lint ``` npm run lint ``` # 项目布局 ``` . ├── public // HTML 和静态资源 │ ├── favicon.ico // 图标 │ ├── index....
6. **Webpack**: 这是一个模块打包工具,用于处理前端资源,如JavaScript、CSS、图片等,将它们转换并打包成浏览器可以识别的格式。 7. **Babel**: Babel是一个JavaScript编译器,用来将ES6+的新特性转换为浏览器...
1. **Webpack 4**:Webpack 是一个模块打包工具,它将各种资源(如 JavaScript、CSS、图片等)视为模块,通过配置和插件系统进行处理和打包。Webpack 4 引入了零配置的"Create React App"式的启动方式,同时提升了...
Webpack则是一个模块打包工具,它可以将各种资源(如JavaScript、CSS、图像等)视为模块,然后根据依赖关系进行打包。Webpack的强大之处在于其插件系统,开发者可以利用各种插件实现代码分割、热模块替换、源映射等...
- `dist`:发布目录,Webpack打包后的结果会被放置在这里,可以直接部署到服务器。 - `node_modules`:存放项目依赖的Node.js模块。 - `.gitignore`:定义哪些文件或文件夹在Git版本控制中忽略。 - `.editorconfig`...
3. `index.html`:网页的入口文件,引入Webpack打包后的JS文件。 4. `.babelrc`:Babel的配置文件,用于将ES6+的语法转换为浏览器兼容的ES5语法。 5. `package.json`:项目依赖和脚本配置,包括Vue、Webpack及其...
标题中的“基于Electron打包的PC端工具类应用”指的是使用Electron框架开发的桌面应用程序,这类应用通常具有跨平台的能力,可以在Windows、MacOS和Linux等操作系统上运行。Electron是GitHub推出的一个开源项目,它...
Webpack4是一个模块打包工具,它可以将各种资源(如JavaScript、CSS、图片等)视为模块处理,并生成一个或多个优化过的静态资源文件。在ReactPC脚手架中,Webpack4作为项目的构建工具,负责编译、打包和优化项目代码...
该项目的来源,主要由于主站的前端代码越发的臃肿,构建方式老旧,且包含着 PC 端的代码,还需要依赖 python 后端环境,导致前端新入职人员安装环境,上手开发就需要很麻烦。 考虑到,规划目前的主要任务以及活动,...
9. 部署和运维:最后,项目完成后需要部署到服务器,这可能涉及到Webpack打包、Nginx配置、CDN加速等内容,以实现高效、稳定的运行环境。 综上所述,这个直播网站PC端项目不仅涉及React前端框架的运用,还涵盖了...
"pc端打包好的文件夹(vue)"指的是使用Vue.js进行PC端应用开发后,经过构建打包生成的文件夹,通常包含了运行项目所需的所有资源。 1. **Vue.js 核心概念** - **虚拟DOM**:Vue.js 使用虚拟DOM来提高性能和效率,...
10. **开发工具**:为了更高效地利用这个模板,开发者可能需要熟悉像Sublime Text、Visual Studio Code这样的代码编辑器,以及Git进行版本控制,可能还需要使用如Webpack或Gulp这样的构建工具来优化和打包资源。...
webpack是一个前端资源模块化管理和打包工具,它可以将多种静态资源如sass、图片、字体等打包成JavaScript文件。在现代前端开发中,webpack被广泛用于优化加载时间和构建效率。在多页面应用或多组件应用中,往往需要...