webpack模块化管理和打包工具

时间 2019-11-30

标签 webpack 模块化管理打包工具繁體版

原文原文链接

Webpack简介javascript

webpack是当下最热门的前端资源模块化管理和打包工具。它能够将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还能够将按需加载的模块进行代码分隔，等到实际css

须要的时候再异步加载。经过 loader 的转换，任何形式的资源均可以视做模块，好比 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。html

模块系统的演进<script>标签前端

<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>

这是最原始的 JavaScript 文件加载方式，若是把每个文件看作是一个模块，那么他们的接口一般是暴露在全局做用域下，也就是定义在 window 对象中，java

不一样模块的接口调用都是一个做用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口，典型的例子如 YUI 库。jquery

这种原始的加载方式暴露了一些显而易见的弊端：webpack

全局做用域下容易形成变量冲突
文件只能按照 <script> 的书写顺序进行加载
开发人员必须主观解决模块和代码库的依赖关系
在大型项目中各类资源难以管理，长期积累的问题致使代码库混乱不堪

CommonJS规范git

CommonJS 是以在浏览器环境以外构建 JavaScript 生态系统为目标而产生的项目，好比在服务器和桌面环境中。github

CommonJS 规范是为了解决 JavaScript 的做用域问题而定义的模块形式，可使每一个模块它自身的命名空间中执行。该规范的主要内容是，模块必须经过 module.exports 导出对外的变量或接口，经过 require() 来导入其余模块的输出到当前模块做用域中。web

一个直观的例子

// moduleA.js
module.exports = function( value ){
    return value * 2;
}

// moduleB.js
var multiplyBy2 = require('./moduleA');
var result = multiplyBy2(4);

AMD规范

AMD（异步模块定义）是为浏览器环境设计的，由于 CommonJS 模块系统是同步加载的，当前浏览器环境尚未准备好同步加载模块的条件。

模块经过 define 函数定义在闭包中，格式以下：

define(id?: String, dependencies?: String[], factory: Function|Object);

id 是模块的名字，它是可选的参数。

factory 是最后一个参数，它包裹了模块的具体实现，它是一个函数或者对象。若是是函数，那么它的返回值就是模块的输出接口或值。　

一些用例

定义一个名为 myModule 的模块，它依赖 jQuery 模块：

define('myModule', ['jquery'], function($) {
    // $ 是 jquery 模块的输出
    $('body').text('hello world');

}); // 使用 require(['myModule'], function(myModule) {});

注意：在 webpack 中，模块名只有局部做用域，在 Require.js 中模块名是全局做用域，能够在全局引用。

定义一个没有 id 值的匿名模块，一般做为应用的启动函数：

define(['jquery'], function($) {
    $('body').text('hello world');
});

　AMD也采用require()语句加载模块，但不一样于CommonJS,他要求两个参数

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功以后的回调函数。若是将前面的代码改写成AMD形式，就是下面这样：

math.add()与math模块加载不是同步的，浏览器不会发生假死。因此很显然，AMD比较适合浏览器环境

目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js

　require(['math'], function (math) {
　　　　math.add(2, 3);
　　});

什么是 Webpack

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，而后将这些模块按照指定的规则生成对应的静态资源。

Webpack 的特色

代码拆分

Loader

智能解析

插件系统

快速运行

webpack基本使用

建立项目根目录
初始化

npm init 或 npm init -y
全局安装

npm install webpack -g
局部安装,在项目目录下安装

npm install webpack --save-dev

--save: 将安装的包的信息保存在package中
--dev:开发版本,只是项目构建的时候使用,项目构建完成后并不依赖的文件
若是使用web开发工具,单独安装

npm install webpack-dev-server --save-dev

基本使用

首先建立一个静态页面 index.html 和一个 JS 入口文件 entry.js：

<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

建立entry.js

// entry.js  : 在页面中打印出一句话
document.write('It works.')

而后编译 entry.js并打包到 bundle.js文件中
```
// 使用npm命令  
webpack entry.js bundle.js
```

使用模块

1.建立模块module.js,在内部导出内容

module.exports = 'It works from module.js'

2.在entry.js中使用自定义的模块

//entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模块

加载css模块

1.安装css-loader

npm install css-loader style-loader --save-dev

2.建立css文件

//style.css
body { background: yellow; }

3.修改 entry.js：

require("!style-loader!css-loader!./style.css") // 载入 style.css
document.write('It works.')
document.write(require('./module.js'))

建立配置文件webpack.config.js

1.建立文件

var webpack = require('webpack')

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
        //同时简化 entry.js 中的 style.css 加载方式：require('./style.css')
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  }
}

2.修改 entry.js 中的 style.css 加载方式：require('./style.css')

3.运行webpack

在命令行页面直接输入webpack

插件使用

1.插件安装

//添加注释的插件
npm install --save-devbannerplugin

2.配置文件的书写

var webpack = require('webpack')

module.exports = {
    entry: './entry.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            //同时简化 entry.js 中的 style.css 加载方式：require('./style.css')
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ],
        plugins: [
            //添加注释的插件
            new webpack.BannerPlugin('This file is created by zhaoda')
        ]
    }
}

3.运行webpack

// 能够在bundle.js的头部看到注释信息
/*! This file is created by zhaoda */

开发环境

webpack 

--progress : 显示编译的进度

--colors ：　带颜色显示，美化输出

--watch　：　开启监视器，不用每次变化后都手动编译

12.4.7.1. webpack-dev-server

开启服务,以监听模式自动运行

1.安装包

npm install webpack-dev-server -g --save-dev

2.启动服务

实时监控页面并自动刷新

webpack-dev-server --progress --colors

自动编译

1.安装插件

npm install --save-dev html-webpack-plugin

2.在配置文件中导入包

var htmlWebpackPlugin = require('html-webpack-plugin')

3.在配置文件中使用插件

plugins: [
        //添加注释的插件
        new webpack.BannerPlugin('This file is created by zhaoda'),
        //自动编译
        new htmlWebpackPlugin({
            title: "index",
            filename: 'index.html', //在内存中生成的网页的名称
            template: './index.html' //生成网页名称的依据
        })
    ]

4.运行项目

webpack--save-dev