webpack的基础入门

时间 2019-11-08

标签 webpack 基础入门繁體版

原文原文链接

webpack的基础入门

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

1. 简介

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

2. 如何使用webpack

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

全局安装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，当更新入口文件时，浏览器会自动刷新。java

`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 的页面内容了。node

//webpack打包构建
$ webpack

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

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

demo01: 入口文件（entry file）

查看demo01git

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

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

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

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是全局范围的。

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 是公共块）

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

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）