打赏

09 2017 档案

webpack 实用配置总结
摘要：1、webpack.config.js配置文件为： 2、package.json文件为： 3、命令行： 阅读全文
posted @ 2017-09-27 15:05 孟繁贵 阅读(1287) 评论(1) 推荐(0) 编辑
webapck html-loader实现资源复用
摘要：1、安装 2、项目目录 layout文件夹下的footer.html文件为： layout文件夹下的head-common.html文件为： login.html文件为（已包含配置）： 3、webpack.config.js文件为： 注：html-loade已经在login.html中配置好了。 4 阅读全文
posted @ 2017-09-25 10:05 孟繁贵 阅读(14102) 评论(2) 推荐(2) 编辑
webpack css打包为一个css
摘要：1、安装 2、项目目录： index文件夹下的index.css： index文件夹下的index2.css： index文件夹下的index-less.less： index文件夹下的index.js： login文件夹下的index.js： login文件夹下的login.css： 3、webp 阅读全文
posted @ 2017-09-20 15:44 孟繁贵 阅读(1152) 评论(0) 推荐(0) 编辑
网站banner图片制作（简易版）
摘要：1、新建图层 根据baner需求，新建图层尺寸： 2、将图片拖进图层 按住shift对图片进行等比例缩放，将等比例缩放后的图片平铺到图层上。 3、添加文字 设置字体以及字体颜色 4、添加描边 选择文字图层，点击“fx（添加图层样式）” 5、效果、保存图片 阅读全文
posted @ 2017-09-20 11:42 孟繁贵 阅读(851) 评论(0) 推荐(0) 编辑
webpack 通用模块(每个页面都用到的js)编译
摘要：1、项目目录 2、配置文件：webpack.config.js 3、执行命令 4、执行结果 项目新的目录结构： common.js部分代码： 阅读全文
posted @ 2017-09-20 11:19 孟繁贵 阅读(3445) 评论(0) 推荐(0) 编辑
webpack CommonsChunkPlugin 提取公共代码
摘要：1、项目结构 2、部分代码 module.js index文件夹下的index.js login文件夹下的index.js 3、webpack.config.js 4、测试 （1）webpack.config.js 输出： （2） 阅读全文
posted @ 2017-09-20 09:55 孟繁贵 阅读(4006) 评论(0) 推荐(0) 编辑
webpack 引入jquery和第三方jquery插件
摘要：1、引入jquery jQuery 直接在 html 中引入，然后在 webpack 中把它配置为全局即可。 index.html: webpack.config.js进行配置： 有时我们希望我们通过script引入的库，如用CDN的方式引入的jquery，我们在使用时，依旧用require的方式来 阅读全文
posted @ 2017-09-19 16:22 孟繁贵 阅读(14884) 评论(0) 推荐(0) 编辑
npm install --save 与 npm install --save-dev 的区别
摘要：以npm安装testPlugin为例： 1、npm install testPlugin: 会把testPlugin包安装到node_modules目录中不会修改package.json之后运行npm install命令时，不会自动安装testPlugin 2、npm install --save: 阅读全文
posted @ 2017-09-19 10:11 孟繁贵 阅读(446) 评论(0) 推荐(0) 编辑
webpack 编译图片文件 file-loader
摘要：1、安装插件 npm i url-loader --save-dev npm i url-loader --save-dev npm install image-webpack-loader --save-dev 2、项目目录 3、layer.less index.html: 4、webpack.c 阅读全文
posted @ 2017-09-18 14:35 孟繁贵 阅读(1748) 评论(0) 推荐(0) 编辑
webpack 编译html模板文件
摘要：1、项目结构 安装loader： 2、模板文件layer.html 3、layer.js 4、app.js 5、webpack.config.js 6、编译 7、结果 阅读全文
posted @ 2017-09-18 10:59 孟繁贵 阅读(911) 评论(0) 推荐(0) 编辑
webpack 编译模板文件
摘要：1、项目结构 安装loader： 2、模板文件layer.tpl 3、layer.js 4、app.js 注意： 5、webpack.config.js 6、编译 7、结果 阅读全文
posted @ 2017-09-18 10:16 孟繁贵 阅读(1016) 评论(0) 推荐(0) 编辑
webpack 编译less/scss文件
摘要：1、安装插件 处理less： 处理sass： 2、项目目录： layer.less为： layer.js为： 3、webpack.config.js配置文件(以编译less为例) 注意：postcss-loader在css-loader后，在less-loader前。 4、执行编译&查看效果 阅读全文
posted @ 2017-09-15 11:25 孟繁贵 阅读(2742) 评论(0) 推荐(0) 编辑
webpack 处理CSS
摘要：1、安装插件 common.css为： flex.css为： app.js为： 4、执行编译&查看结果 阅读全文
posted @ 2017-09-15 10:49 孟繁贵 阅读(1699) 评论(0) 推荐(0) 编辑
photoshop 切片工具进行切图
摘要：1、使用切片工具切图 2、存储为web所用格式 3、选择图片格式 4、只保存切片（选择所有用户切片） 5、查看： 阅读全文
posted @ 2017-09-15 09:48 孟繁贵 阅读(488) 评论(0) 推荐(0) 编辑
webpack 编译ES6插件babel-loader
摘要：1、安装babel-loader 参考：http://babeljs.io/docs/setup/#installation 进入项目目录执行安装命名： 2、项目结构： app.js代码为： 3、webpack.config.js 配置文件为 4、执行命令 5、编辑后的结果 阅读全文
posted @ 2017-09-14 15:05 孟繁贵 阅读(1476) 评论(0) 推荐(0) 编辑
html-webpack-plugin插件 根据模板生成多页面
摘要：1、项目目录结构为： 2、webpack.config.js配置文件为： 3、执行命令： 4.编译： 阅读全文
posted @ 2017-09-13 12:13 孟繁贵 阅读(1090) 评论(0) 推荐(0) 编辑
webpack配置上线地址
摘要：webpack配置上线地址主要使用output配置项下的publicPath。 webpack.config.js配置文件为： 执行命令： 效果： （1）项目目录输出结构： （2）html 引用地址为线上地址： 阅读全文
posted @ 2017-09-12 16:42 孟繁贵 阅读(687) 评论(0) 推荐(0) 编辑
webpack插件html-webpack-plugin
摘要：1、插件安装 2、插件使用 webpack.config.js配置文件为： 执行命令： 3、传递参数 html代码（部分）： 编译后的结果为： 4、html压缩： 阅读全文
posted @ 2017-09-12 16:37 孟繁贵 阅读(2019) 评论(0) 推荐(0) 编辑
webpack entry和output配置属性
摘要：1、entry entry的三种配置方式： （1）传递字符串： 单个入口语法：传递一个字符串 （2）传递数组 将创建“多个主入口(multi-main entry)，并且将它们的依赖导向(graph)到一个“chunk”时。 示例，webpack.config.js文件为： 执行命令： 效果为文件合 阅读全文
posted @ 2017-09-12 14:03 孟繁贵 阅读(11558) 评论(1) 推荐(0) 编辑
webpack 安装以及使用
摘要：1、安装webpack 全局安装代码： 2、项目中使用webpack （1）进入项目目录 cd C:\Users\dell\Documents\HBuilderProject\hello （2）在项目中生成package.json npm init （5）本项目使用webpack 执行命令：webp 阅读全文
posted @ 2017-09-07 15:42 孟繁贵 阅读(365) 评论(0) 推荐(0) 编辑

TOP