12 2017 档案

webpack快速入门——实战技巧：webpack模块化配置
摘要：首先在根目录，新建一个webpack_config文件夹，然后新建entry_webpack.js文件，代码如下： 2.在webpack.config.js中引入 3.在入口文件修改代码： 4.在终端输入 npm run dev ，配置成功！ 前端必学内容：webpack（模块打包器） webpac 阅读全文
posted @ 2017-12-28 15:56 盒子豪 阅读(1177) 评论(0) 推荐(0)
webpack快速入门——Json配置文件使用
摘要：在实际工作中，我们的项目都会配置一个Json的文件或者说API文件，作为项目的配置文件。 有时候你也会从后台读取到一个json的文件，这节课就学习如何在webpack环境中使用Json。 如果你会webpack1或者webpack2版本中，你是需要加载一个json-loader的loader进来的， 阅读全文
posted @ 2017-12-27 16:19 盒子豪 阅读(4686) 评论(0) 推荐(0)
webpack快速入门——集中拷贝静态资源
摘要：工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源（比如设计图、开发文档）， 这些静态资源有可能是文档，也有可能是一些额外的图片。项目组长会要求你打包时保留这些静态资源， 直接打包到制定文件夹。其实打包这些资源只需要用到copy-webpack-plugin。 1.首先新建文件夹pu 阅读全文
posted @ 2017-12-27 15:57 盒子豪 阅读(5468) 评论(0) 推荐(1)
webpack快速入门——实战技巧：webpack优化黑技能
摘要：1.抽离jquery，vue（多个第三方类库抽离） 修改入口文件(webpack.config.js中) 2.引入插件： 3.配置好后，我们输入webpack打包试一下 4.效果对比： jquery和vue已经被抽离出来了，同时入口entry.js的文件也从758kb变成了4kb 前端必学内容：we 阅读全文
posted @ 2017-12-27 15:42 盒子豪 阅读(1444) 评论(0) 推荐(1)
webpack快速入门——实战技巧：watch的正确使用方法，webpack自动打包
摘要：随着项目大了，后端与前端联调，我们不需要每一次都去打包，这样特别麻烦，我们希望的场景是，每次按保存键，webpack自动为我们打包，这个工具就是watch！ 因为watch是webpack自带的插件，所以我们只需要配置就行了 1.在webpack.config.js中配置： 2.在终端中输入：web 阅读全文
posted @ 2017-12-20 11:12 盒子豪 阅读(12019) 评论(1) 推荐(0)
webpack快速入门——实战技巧：优雅打包第三方类库
摘要：下面说两种方法： 一、 1.引入jQuery，首先安装： 2.安装好后，在我们的entry.js中引入： 3.引入完成后，我们在entry.js中写入jquery的语法 进行测试： 4.使用 npm run server 效果如下： 二、 1.用plugin引入 如果你觉的上面的方法和webpack 阅读全文
posted @ 2017-12-20 10:49 盒子豪 阅读(3234) 评论(0) 推荐(0)
webpack快速入门——实战技巧：开发和生产并行设置
摘要：package.json中，devDependencies和dependencies是不同的 devDependencies：开发依赖 dependencies：生产依赖（线上） 1.安装生产环境的依赖包： 2.配置生产环境和开发环境并行： 我们在以前的配置中设置了一个变量website，用于静态资 阅读全文
posted @ 2017-12-18 18:38 盒子豪 阅读(1479) 评论(0) 推荐(0)
webpack快速入门——打包后如何调试
摘要：在配置devtool时，webpack给我们提供了四种选项。 source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度； cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提 阅读全文
posted @ 2017-12-18 15:55 盒子豪 阅读(5274) 评论(1) 推荐(0)
webpack快速入门——给webpack增加babel支持
摘要：1.Babel的安装与配置 Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个 你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel 阅读全文
posted @ 2017-12-18 15:52 盒子豪 阅读(1137) 评论(0) 推荐(0)
webpack快速入门——CSS进阶：消除未使用的CSS
摘要：使用PurifyCSS可以大大减少CSS冗余 1.安装 2.引入glob，因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。引入purifycss-webpack 3.配置 配置好后，我们可以在css文件里，故意写 阅读全文
posted @ 2017-12-12 20:23 盒子豪 阅读(2640) 评论(0) 推荐(0)
webpack快速入门——CSS进阶：自动处理CSS3前缀
摘要：为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。 1.安装 2.在根目录新建一个postcss.config.js文件 这就是对postCSS一个简单的配置，引入了autoprefixer插件。让postCSS 阅读全文
posted @ 2017-12-12 17:31 盒子豪 阅读(3682) 评论(0) 推荐(0)
webpack快速入门——CSS进阶：SASS文件的打包和分离
摘要：1.安裝：因为sass-loader依赖于node-sass，所以需要先安装node-sass 2.配置 3.新建一个sass文件，编写div 4.在entry.js中引入css 5.输入webpack打包，最终效果： 6.sass文件分离 修改配置： 7.进行打包，最终效果： 前端必学内容：web 阅读全文
posted @ 2017-12-12 16:50 盒子豪 阅读(6869) 评论(0) 推荐(1)
webpack快速入门——CSS进阶，Less文件的打包和分离
摘要：1.要使用less，首先使用npm安装less服务 还需要安装Less-loader用来打包使用。 2.在module中配置 3.在html中编写一个div，在css中新建一个less文件 4.引入到entry.js中 5.使用webpack进行打包 6.输入npm run server 查看效果 阅读全文
posted @ 2017-12-12 15:52 盒子豪 阅读(9873) 评论(1) 推荐(1)
webpack快速入门——处理HTML中的图片
摘要：在webpack中是不喜欢你使用标签<img>来引入图片的，但是我们作前端的人特别热衷于这种写法， 国人也为此开发了一个：html-withimg-loader。他可以很好的处理我们在html 中引入图片的问题。 1.安装 2.在webpack.config.js配置 3.输入webpack进行打包 阅读全文
posted @ 2017-12-12 15:02 盒子豪 阅读(5616) 评论(2) 推荐(0)
webpack快速入门——CSS分离与图片路径处理
摘要：1.在终端安装extract-text-webpack-plugin 2.引入插件 3.配置 4.声明一个对象 然后引用这个对象 5.配置完成后，就可以使用webpack进行打包了 6. 前端必学内容：webpack（模块打包器） webpack3 学习内容，点击即可到达 (1).webpack快速 阅读全文
posted @ 2017-12-11 15:16 盒子豪 阅读(4340) 评论(0) 推荐(0)
前端必学内容：webpack3快速入门 1-23节内容参考
摘要：前端必学内容：webpack（模块打包器） webpack3 学习内容，点击即可到达 (1).webpack快速入门——如何安装webpack及注意事项 (2).webpack快速入门——webpack3.X 快速上手一个Demo (3).webpack快速入门——配置文件：入口和出口，多入口、多出 阅读全文
posted @ 2017-12-11 14:08 盒子豪 阅读(438) 评论(0) 推荐(0)
webpack快速入门——CSS中的图片处理
摘要：1.首先在网上随便找一张图片，在src下新建images文件夹，将图片放在文件夹内 2.在index.html中写入代码：<div id="pic"></div>来放置图片 3.设置图片的css 4.编写完成后，进行打包，这时候会报错，先不要慌，这是因为缺少file-loader和url-loade 阅读全文
posted @ 2017-12-08 16:39 盒子豪 阅读(4361) 评论(0) 推荐(0)