zoukankan      html  css  js  c++  java

  • webpack的基础入门

    webpack的基础入门

    这里对于 webpack 的基础入门进行一些总结，可以参考 github 上的 webpack-demo ，链接是 https://github.com/RealAndMe/webpack-demo

    1. 简介

    webpack是前端资源加载/打包工具。它将根据模块的依赖关系将一些静态资源 js , less , css 等进行静态分析，然后转化为静态文件，减少页面请求，实现页面的优化。

    2. 如何使用webpack

    在安装webpack之前，你的本地环境必须要有 node.js 。可以参考之前的博客《npm使用指南》和《node.js的安装配置——前端配置》 。

    全局安装webpack和webpack-dev-server

    //全局安装webpack 和 webpack-dev-server
$ npm install webpack -g
$ npm install webpack-dev-server -g

    webpack 是用来读取配置文件 webpack.config.js ，并构建捆绑包的。

    webpack-dev-server 是用来启动服务器的，绑定 localhost:8080，当更新入口文件时，浏览器会自动刷新。

    git clone 克隆github上的代码，并安装依赖项

    //克隆代码
$ git clone git@github.com:RealAndMe/webpack-demo.git
//目录下有一个webpack-demo文件夹，切换工作目录到webpack-demo
$ cd webpack-demo
//安装项目运行所依赖的模块
$ npm install

    在对应的demo文件夹下面运行源文件

    //切换目录，比如demo01
$ cd demo01
//启动服务器
$ webpack-dev-server

    启动服务器后，浏览器输入 localhost:8080 就能看到 demo01 的页面内容了。

    //webpack打包构建
$ webpack

    命令执行之后，会看到 demo01 目录下，生成一个 bundle.js 文档。

    下面根据 github 上的 demo 来进行讲解。

    demo01: 入口文件（entry file）

    查看demo01

    main.js 是入口文件，webpack 读取和分析入口文件以及项目的依赖项，然后构建成 捆绑文件boundle.js 输出。

    index.html HTML文档 ， main.js 入口的js文件 ， webpack.config.js 是 webpack 的配置文件。

    index.html

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>demo01</title>
<link rel="stylesheet" href="">
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>

    mian.js

    document.write("<h1>hello world!</h1>");

    webpack.config.js

    module.exports = {
	entry: "./main.js",
	output: {
		filename: "bundle.js"
	}
};

    代码写好后，在 demo01 目录下，执行命令：

    //启动服务器，实现更新入口文件时浏览器自动刷新
$ webpack-dev-server

    当 mian.js 文件更新时，执行上面命令行，浏览器自动刷新。浏览器的访问网址：localhost:8080

    webpack-dev-server

    image

    执行构建命令：

    //运行构建
$ webpack

    执行完后，会生成一个boundle.js 。

    webpack

    demo02: 多个入口文件

    查看demo02

    允许有多个入口文件。entry 可以有多个值。执行上述命令，启动服务器浏览内容。执行构建命令，打包入口文件。多个入口文件输出文件也对对应有几个。

    webpack.config.js

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

    执行构建命令后，会生成两个文档，分别是bundle1.js 和bundle2.js

    demo03: babel-loader

    查看demo03

    babel-loader 可以将 JSX 和 ES6 转换为 JS 文件。

    需要的插件依赖有 babel-loader ，babel-core ，babel-preset-es2015 ，babel-preset-react ，react-dom ，react ，这些必须在 package.json 文档中配置好，可以通过命令 $ npm install express -save-dev 安装，其中 express 是需要安装的依赖名称。

    webpack.config.js

    module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      {
        test: /.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015&presets[]=react',
      },
    ]
  }
};

    代码写好后，在 demo03 目录下执行命令：

    $ webpack-dev-server  //启动服务器，localhost:8080打开
$ webpack //编译构建

    exclude:/node_modules/ 用来排除 npm 包，提高编译速度。

    loaders 字段分配加载器， test 用正则表达式匹配不同后缀的文件，然后 loader 定义不同的加载器，

    注意：问号？ 是通过字符串传递查询参数的，查询字符串格式取决与加载的程序。也可以用另外一种方式来写查询参数。

    module: {
  loaders: [
    {
      test: /.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015', 'react']
      }
    }
  ]
}

    demo04: css-loader

    查看demo04

    webpack 允许 js 中请求 CSS 代码。

    需要的插件依赖有 style-loader , css-loader

    配置信息中需要两个加载器，style-loader 将 style 插入到 index.html 页面中。 css-loader 读取 CSS 文件。

    注意：loader: "style-loader!css-loader" 两个加载器之间用感叹号 ！ 连接，两者顺序不要更换！

    main.js

    require("./app.css");

    webpack.config.js

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

    代码写好后，启动服务器，打开控制台，可以看到 index.html 有内联的样式表。

    demo05: url-loader

    查看demo05

    webpack 允许 js 中请求 图片。

    需要的插件依赖有 file-loader , url-loader 。

    url-loader 转换图像文件。 后面加了查询参数如果图像尺寸小于8192字节，则将其转换为数据URL; 否则，它将被转换成普通的URL。

    main.js

    //创建新的元素
var img1 = document.createElement("img");
img1.src = require("./small.png");
//添加
document.body.appendChild(img1);

//创建新的元素
var img2 = document.createElement("img");
img2.src = require("./big.png");
//添加
document.body.appendChild(img2);

    webpack.config.js

    module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
  }
};

    注意：问号（？）用于将参数传递给装载机。

    启动服务器后，打开控制台，small.png 和 big.png 将具有以下URL。

    //small.png
<img src="data:image/png;base64,iVBOR...uQmCC">
//big.png
<img src="4853ca667a2b8b8844eb2693ac1b2578.png">

    demo06: CSS Module

    查看demo06

    css-loader?modules 可以启动 CSS 模块的规范。

    在默认情况下，模块的 CSS 是局部作用域范围的 CSS ，可以用 :global() 来关闭局部域的作用。

    app.css

    .h1 {
	 color:red;
	}
	
:global(.h2) {
  color: blue;
}

    index.html

    <!DOCTYPE html>
<html>
<head>
</head>
<body>
	<h1 class="h1">Hello World</h1>
	<h2 class="h2">Hello Webpack</h2>
	<div id="contain"></div>
	<script src="bundle.js" type="text/javascript"></script>
</body>
</html>

    main.jsx

    var React = require('react');
var ReactDOM = require('react-dom');
var style = require('./app.css');

ReactDOM.render(
  <div>
    <h1 className={style.h1}>Hello World</h1>
    <h2 className="h2">Hello Webpack</h2>
  </div>,
  document.getElementById('contain')
);

    启动服务器，打开浏览器，可以看到只有第二个h1是红色的，因为它的CSS是局部范围的，并且h2都是蓝色的，因为它的CSS是全局范围的。

    demo06

    demo07: UglifyJs Plugin

    查看demo07

    webpack 有许多扩展功能的插件，比如 uglifyjs plugin 是压缩输出的 boundle.js 的 JS 代码。

    webpack.config.js 用到的字段 plugins 用来放插件的。

    webpack.config.js

    var webpack = require('webpack');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new uglifyJsPlugin({})
  ]
}

    启动服务器，可以看到浏览器页面没有多大的变化。

    执行构建命令 $ webpack 可以看到 boundle.js 被压缩成一行，省去了所有的注释，并且将 main.js 细化如下：

    var t="Hello";t+=" World",document.write("<h1>"+t+"</h1>")

    demo08: 加载第三方插件

    查看demo08

    不是内置的插件，可以通过 npm install 安装，webpack 允许加载第三方插件。

    webpack.config.js

    //创建html文档
var htmlWepbackPlugin = require("html-webpack-plugin");
//自动打开浏览器
var openBrowserPlugin = require("open-browser-webpack-plugin");
module.exports = {
	entry: "./main.js",
	output: {
		filename: "boundle.js"
	},
	plugins: [
		new htmlWepbackPlugin(
			{
				title: "demo08",
				filename: "index.html"
			}
		),
		new openBrowserPlugin(
			{
				url: "http://localhost:8080"
			}
		)
	]
}

    html-webpack-plugin 是创建一个 index.html 文档。

    需要的依赖是：html-webpack-plugin

    npm 安装插件，命令：

    //创建.html文档
$ npm install html-webpack-plugin -save-dev
//自动打开浏览器
 $ npm install open-browser-webpack-plugin -save-dev

    手动启动服务器，浏览器可以看到效果。

    构建打包命令：$ webpack ，可以看到 demo 08 目录下生成了一个 index.html 和 bundle.js

    open-browser-webpack-plugin 是在启动服务器命令webpack-dev-server时，会自动打开一个浏览器标签。

    需要的依赖 是：open-browser-webpack-plugin

    有了这两个插件，就不用手写 index.html ，也不用手动打开浏览器了。

    demo09: 代码分割

    查看demo09

    webpack 允许将代码分割成很多块，提高代码的复用。

    webpack.config.js

    //CommonJS的： require.ensure进行代码分割
require.ensure(['./a'], function(require) {　　//require作为参数发送给该函数
  var content = require('./a');　　//函数体进一步调用require执行所需要的模块。
  document.open();
  document.write('<h1>' + content + '</h1>');
  document.close();
});

    使用 CommonJS 模块语法的 require.ensure 来定义分割点。

    require.ensure(dependencies, callback)
    • dependencies ： 字符串，声明 callback 要执行的代码所需要的所有模块。
    • callback 函数功能。将 require 作为参数发送给此函数，函数体可以使用它来进一步require()执行需要的模块。

    执行命令$ webpack ，构建打包，会生成两个文档，bundle.js 和 0.bundle.js 。HTML文档根据需要，从bundle.js中加载0.bundle.js。

    demo10: bundle-loader

    查看demo10

    代码分割，用 bundle-loader ，与 demo09 相似。

    webpack.config.js

    var load = require('bundle-loader!./a.js');
load(function(file) {
  document.open();
  document.write('<h1>' + file + '</h1>');
  document.close();
});

    需要安装依赖 ： bundle-loader

    demo11: 公共块 （CommonsChunkPlugin）

    查看demo11

    CommonsChunkPlugin 由多个入口点之间共享的公共模块组成。

    语法：

    new webpack.optimize.CommonsChunkPlugin(options)

    new webpack.optimize.CommonsChunkPlugin(options)不再支持废弃的webpack 1构造函数。改用相应的选项对象。

    option 选项有：（具体可以参考其官网）

    {
  //公共块的块名称
  name: string, 
  //公共块的文件名名称
  filename: string,
  minChunks: number|Infinity|function(module, count) -> boolean,
  chunks: string[],
  children: boolean,
  async: boolean|string,
  minSize: number,
}

    执行命令后，目录结构为：（init.js 是公共块）

    demo11

    demo12: 全局变量

    查看demo11

    如果你想要用一些全局变量，但是又不将它们包含在webpack捆绑包中，可以在 webpack.config.js 中添加一个字段 externals

    webpack.config.js

    module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      { test: /.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' },
    ]
  },
  externals: {
    'data': 'data'
  }
};

    mian.jsx

    var data = require('data');
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>{data}</h1>,
  document.body
);

    有道云笔记参考：http://note.youdao.com/noteshare?id=7ac7a9098e636391abc936e439146601&sub=5A5BC060648D43EF8017DF898C073B45
  • 相关阅读:
    脊椎有问题的7个信号
    SOHO兼职 SOHO一族 世界创业实验室
    MSTParser句法工具使用方法
    BinaryFormatter序列化实例
    C#中文件流,网络流,缓冲流等流的概念理解
    探讨和比较Java和_NET的序列化_Serialization_框架
    .net中对象序列化技术浅谈
    史上最详细最容易理解的HMM文章
    成功者足迹的综合总结：网络创业14条不外传的绝招
    此情何时休
  • 原文地址：https://www.cnblogs.com/real-me/p/7223354.html
Copyright © 2011-2022 走看看