webpack3-x
文章平均质量分 77
Stangor
99%的原因都是因为懒
展开
-
webpack 3.X 安装与配置
组件如何接收属性,所有的属性都可以通过this.props对象获取,像下面这样去使用:<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script crossorigin src="https://unpkg.com/react@16/umd/react.原创 2017-11-23 16:25:44 · 8621 阅读 · 0 评论 -
Webpack3.x 通过Webpack加载Bootstrap的CSS/Scss/JS 及更改CSS样式
如何用webpack去加载bootstrap的css/scss 及JS呢,先准备一个bootstrap 模板b-index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal原创 2017-11-27 17:34:40 · 2916 阅读 · 1 评论 -
Webpack 3.x 在CSS和Template中使用file-loader及解决image-webpack-loader 优化图片问题
如何在CSS或是template中使用图片?在CSS中使用,先安装file-loader:npm i -D file-loader安装完成后,在package.json中看到的当前版本:"file-loader": "^1.1.5"接着在app.scss中加入下面的样式:html, body{ height: 100%; min-height: 100%; backgroun原创 2017-11-27 08:31:39 · 15438 阅读 · 2 评论 -
Webpack3.x Hot Module Replacement的使用 && switch to prot env to use ExtractTextPlugin
关于HMR,它的介绍:Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running without a page reload并且它只是针对dev model :HMR is not intended for use in production, meaning it原创 2017-11-26 11:24:23 · 372 阅读 · 0 评论 -
Webpack 3.x 尝试使用Pug(Jade)模板引擎
关于Pug模板引擎,之前的名字叫Jade,关于它的介绍:可以参考这里,它是一个Pug – robust, elegant, feature rich template engine for Node.js。这里还有一个关于JS模板引擎的常用的几个:JS template engines。先安装:npm i -D pug pug-html-loader安装完成后,它的当前最新版本是:"pug-html原创 2017-11-25 22:05:04 · 3507 阅读 · 0 评论 -
Webpack 3.x 创建多个template及rimraf使用
如果是使用的webpack-dev-server模式的话,它是从内存中去读取目标模板的,也就是说如果现在磁盘上的index.html被删除了,对它读取index.html没有任何影响,那么现在我要做这样的件事,将目标模板index.html更换一下目录位置,也就是说这种情况会是在使用webpack -d的模式下才有意义,所以现在就切换回这种模式: "scripts": { "dev": "原创 2017-11-25 18:02:04 · 2619 阅读 · 0 评论 -
Webpack 3.x 通过webpack安装React和Babel
之前用最原始的方式写过一个React的hello world,参见:原始React hello world在React的官网上面会介绍好几种方式去安装React,下面尝试通过Webpack来安装:npm i -D react react-dom安装完成后的版本:"react": "^16.1.1","react-dom": "^16.1.1",在使用React的时候,必须要熟悉ES6与Babel,原创 2017-11-25 16:27:38 · 1386 阅读 · 0 评论 -
Weapck 3.x 安装与配置webpack dev server
关于webpack dev server,看官网上的介绍 :Use webpack with a development server that provides live reloading. This should be used for development only.It uses webpack-dev-middleware under the hood, which provides原创 2017-11-24 15:51:23 · 1082 阅读 · 0 评论 -
Webpack 3.x 中 style/css/Sass loaders
上篇里已经通过html webpack plugin生成了html 模板,并且可以配置像title, hash, minify, 接下来分析如何将css也bundle 进去,webpack是通过loaders来完成,可以参考这里:https://webpack.js.org/concepts/loaders/,还有中文版本的:https://doc.webpack-china.org/concept原创 2017-11-24 14:20:27 · 7057 阅读 · 0 评论 -
Webpack3.x 中 html-webpack-plugin的用法
继上篇webpack 入门,安装与配置完后,是时候去把这些绑定好的file放到html中使用,使用!+tab,快速在一个.html文件中创建一个模板(index-manual.html):<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width原创 2017-11-23 23:43:09 · 3370 阅读 · 1 评论 -
Webpack 3.x 通过PurifyCSS Plugin按需加载bootstrap css样式
之前通过webpack把bootstrap css 样式引入到模板中,但是注意到的是把全部bootstrap css样式加载进来,但是当前的template中只有简单的些button/div/img/h1/等,而且这些元素只用到了一小部分样式,没有必要把全部的样式都加载进模板,所以需要改进,怎么办呢,PurifyCSS Plugin可以做到只加载当前页面所需要的样式。 先安装:npm i -D p原创 2017-11-27 18:37:51 · 3449 阅读 · 0 评论