webpack 学习分分快三计划

作者:分分快三计划

Async Update

asyncUpdate() {
    this.loadMarkdown("../../docs/"   this.data.lan   "/"   this.data.name   ".md",(md)=>{
        this.data.html = this.md.render(md);
        this.update();
    })
}

异步的刷新组件。

详见的代码能够看这里

2、webpack的安装

npm install webpack -g

 

 

 大家还可以直接设置到花色的信任性里,也正是写入package.json

npm init

npm install webpack --save-dev

 

动态加载markdown

 loadMarkdown(url,callback) {
     var xobj = new XMLHttpRequest();
     xobj.open('GET', url, true); 
     xobj.onreadystatechange = function () {
         if (xobj.readyState == 4 && xobj.status == "200") {
             callback(xobj.responseText);
         }
     };
     xobj.send(null);
 }

加载完后直接付出remarkable解析成HTML,remarkable剖判成HTML的速度一点也非常的慢到您不可能感知,所以提前转移好HTML不是老大供给。

行使uglify-js 压缩打包JS代码

 

防止webpack打包markdown

当大家设置async为true的时候,不是期待webpack把markdown打包入js里的,所以在webpack config做了之类操作:

var proj_config = require('./project.js');
if(proj_config.async) {
    config.module.loaders[3].exclude =  /.md$/;
}

其中config.module.loaders[3]纵使安插的markdown loader。exclude就代表把相关的正则相称到的公文一向给无视掉。

应用webpack Image loader 加载图片

1、新建main.js文件, 创制img标签后,把src的值用require引进来。然后插入标签

1 var img1 = document.createElement("img");
2 
3 img1.src = require("./small.png");
4 document.body.appendChild(img1);
5  
6 var img2 = document.createElement("img");
7 img2.src = require("./big.png");
8 document.body.appendChild(img2);

 

 

 

2、建立index.html文件,引入bundle.js

 1 <!DOCTYPE html>
 2 <html lang="en">
 3  
 4 <head>
 5     <title></title>
 6     <meta charset="UTF-8">
 7     <meta name="viewport" content="width=device-width, initial-scale=1">
 8  
 9 </head>
10  
11 <body>
12     <script type="text/javascript" src="bundle.js"></script>
13 </body>
14  
15 </html>

 

 

3、创设webpack.config.js配置文件

 

 1 module.exports = {
 2     entry: './main.js',
 3     output: {
 4         filename: 'bundle.js'
 5     },
 6     module: {
 7         loaders: [
 8             { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192' },
 9         ]
10     }
11 };

 

 

4、张开命令行,用npm 安装url-loader包。

首先npm init

得到 webpack.json

 

在  

npm install file-loader --save-dev

npm install url-loader --save-dev

 

 

5、用webpack命令举办打包

 

webpack

 

写在日前

Md2site是基于Omi的风流洒脱款Markdown转网址工具,使用简单,生成的文本轻易,功能强盛。

  • 官网:
  • Github:
  • 赤诚案例:

在使用从前的版本的时候,你会发掘体验拾贰分好?为何非常好?因为页面间的切换是无刷新!
无刷新的原理正是,全数的markdown都会被webpack打包到js里,只要在js动态require就能够。

与上述同类带给的叁个标题正是:若是有雅量的markdown的时候,第4回加载的大运非常短。

怎么解决?支持动态拉取和解析markdown~~

二、uglify-js介绍:

ugligy-js是多个用npm安装的JavaScript代码压工具,大家在grunt和gulp中时时采取。

用npm命令进行安装

npm install uglify-js g

 

最常用的措施

uglifyjs [input files] [options]

 

 

原理分析

二、loader的解析

loader的分析相仿模块,一个loader模块会导出四个方式並且可被nodejs写为可相称的JavaScript,日常意况下通过npm来管理loader,但您也足以把loader放在自身的使用里。

Github

招待使用~~

三、安装loader

npm install xxx-loader --save-dev

 

OR

npm install xxx-loader --save

 

运用姿势

$ npm install md2site -g
$ md2site init your_project_name
$ cd your_project_name
$ npm run dev
$ npm run dist

不无命令都以和原先相通的。接下来,展开project.js:

module.exports = {
    cdn : '',
    async: true
}
  • 你把async改成true就意味着会变动三个异步拉取和深入剖判markdown的网址
  • 你把async改成false就代表会生成二个全然无刷新的网站

够方便啊!!生机勃勃键配置!!

live-server服务器介绍

live-server是意气风发款简单的支出用的Http服务器。特点正是在你静态文件进行修正后,有机动加载的成效。

采取它首要有三个原因:

1、对Ajax的操作应当要有服务器的支撑,比如用javascript去拿到内容。

2、浏览器的自动更新,能够加快开荒。你没有必要安装任何浏览器插件或手动增加代码片段到您的网页代码里

四、CSS-loader 实例

1、建立main.js文件,并用require引入app.css文件

require('./app.css');
document.write('<h1>Hello Webpack!</h1>');

 

2  app.css

3、创设webpack.config.js配置文件,在里边参与加载器

module.exports = {

    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /.css$/, loader: 'style-loader!css-loader' },
        ]
    }
};

  

 

 

5 用npm 安装  css-loader  和style-loader

npm install style-loader --save-dev

npm install css-loader --save-dev

 

6、在决定台输入 webpack 进行李包裹装

webpack

 

朝气蓬勃、webpack 插件机制介绍:

插件能够做到更多loader不得不负众望的效果与利益。插件的施用相通是在webpack的陈设消息plugins选定中钦命。Webpack本人内置了部分常用的插件,还是能透过npm安装第三方插件。

三、用Webpack中的uglify-js压缩Demo

 1 var webpack = require('webpack');
 2 
 3 module.exports = {
 4     entry: './main.js',
 5     output: {
 6         path: __dirname,
 7         filename: 'bundle.js'
 8     },
 9     plugins: [
10         new webpack.optimize.UglifyJsPlugin({
11             compress: {
12                 warnings: false
13             }
14         })
15     ]
16 };

 

 

 

利用webpack营造地面服务器

采纳webpack自带的webpack-dev-server来创设叁个地面服务器。它令你的浏览器检验你的代码改进,并机关刷新订正后的结果,它是基于node.js营造。webpack-dev-server是二个独立的零件,在webpack中实行配置在此之前需求独自安装它看作项目信任。

1、安装webpack-dev-server     全局

 

npm install -g webpack-dev-server

 

 

2、在webpack.config.js中配置devserver选项:

  • contentBase : 暗许webpack-dev-server会为根文件夹提供地点服务器,假如想为其它三个目录下的文本提供地方服务器,应该在这里边设置其所在目录。
  • port :设置默许监听端口,假使轻巧,默以为”8080″
  • inline : 设置为true,当源文件改换时会自动刷新页面
  • colors : 设置为true,使终端输出的文本为彩色的
  • historyApiFallback :在付出单页时相当有用,它依据于HTML5 history API,假设设置为true,全体的跳转将指向index.html
  • host : 主机地址,倘若是付出本机搭建,要求利用本机IP地址,不然会报错

    1 module.exports = { 2 entry: dirname '/main.js', 3 output: { 4 path: dirname '/', 5 filename: 'bundle.js' 6 }, 7 devServer: { 8 contentBase: './', //本地服务器所加载的页面所在的目录 9 host: '192.168.1.158', //本地IP地址 10 colors: true, //终端输出结果为彩色 11 historyApiFallback: true, //不跳转 12 inline: true, //实时刷新 13 port: '3333' //端口号 14
    15 } 16 }

3、在尖峰中输入指令,开启运营业地服务器。它不仅仅提供了服务器,还有也许会监视大家的文件变化自动更新效果,可是它不是真的的卷入,它好像于在内部存款和储蓄器中实行了包装。所以当和姑件并不曾变化

webpack-dev-server

 

多入口文件(Multiple entry files)

 

 

成立三个JavaScript文件,分别是main1.js 和main2.js

index.html文件,引进bundle1.js和bundle2.js,那五个公文正是我们要打包的多少个js文件

构建webpack.config.js配置文件

module.exports = {

    entry: {
        bundle1: './main1.js',
        bundle2: './main2.js'
    },
    output: {
        filename: '[name].js'
    }
};

 

 

 

使用Webpack CSS  loader加载器

一、什么是loader

loader用于转移应用程序的资源文件,他们是运作在nodejs下的函数,使用参数来赢得八个能源的根源况兼重回三个新的来源于(能源的职责),比如:你能够运用loader来告诉webpack去加载二个coffeeScript或许Babel文件。

3、配置文件webpack.config.js

重视:什么是进口文件?模块打包的源点称之为入口起源(entry point)。入口源点告诉webpack从何地初步,并根据着依赖关系实行打包。可以将你的使用入口源点感到是根上下文(contextual root)或app第二个运营文件。

webpack.config.js   示例

1 module.exports = {
2 
3     entry: "./main.js",
4     output: {
5         filename: 'bundle.js'
6     }
7 };

 

 

安装live-server,只要用npm install就足以设置了

 

npm install live-server -g

浏览器  127.0.0.1:8080

 

1、webpack介绍:

webpack是八个今世的JavaScript应用模块打包器(module bundler),它能把种种资源,举例JS(含JSX)、coffee、样式(less/sass)、图片等都看成模块来拍卖和选用。它兼具不敢相信 无法相信的构造和神奇的功用,大大升高了我们技术员的工作成效。比方:大家得以一贯运用require(xxx)的方式来引进各模块,固然他们或然需求经过编写翻译(举个例子JSX和sass),但大家无须再上边花销太多心绪,webpack有着各个完善的加载器(loader)在默默管理那些事情。它能够部分代表Grunt和gulp的功力。

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 webpack