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

执行构建命令：

//运行构建
$ 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

posted @ 2017-07-23 00:03 澋意阅读(427) 评论(0) 编辑收藏举报

刷新页面返回顶部

吴煜伦比的疯丫头

GitHub：https://github.com/RealAndMe

webpack的基础入门

webpack的基础入门

1. 简介

2. 如何使用webpack

全局安装webpack和webpack-dev-server

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

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

demo01: 入口文件（entry file）

demo02: 多个入口文件

demo03: babel-loader

demo04: css-loader

demo05: url-loader

demo06: CSS Module

demo07: UglifyJs Plugin

demo08: 加载第三方插件

demo09: 代码分割

demo10: bundle-loader

demo11: 公共块（CommonsChunkPlugin）

demo12: 全局变量

公告

吴煜伦比的疯丫头

GitHub：https://github.com/RealAndMe

webpack的基础入门

webpack的基础入门

1. 简介

2. 如何使用webpack

全局安装webpack和webpack-dev-server

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

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

demo01: 入口文件（entry file）

demo02: 多个入口文件

demo03: babel-loader

demo04: css-loader

demo05: url-loader

demo06: CSS Module

demo07: UglifyJs Plugin

demo08: 加载第三方插件

demo09: 代码分割

demo10: bundle-loader

demo11: 公共块 （CommonsChunkPlugin）

demo12: 全局变量

公告

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

demo11: 公共块（CommonsChunkPlugin）