...

Callwoola

大雄'blog

Home 主页 Blog 博客 Tag标签 GitHub开源 about me关于我


react手脚架,webpack的入门教程

webpack 是一个非常厉害的整理解决方案, 国内也有类似的产品例如 baidu 的 fis

1. 安装

npm install -g webpack

2. 基本使用

假设项目文件结构如下:

/app
  |--index.html
  |--main.js
  |--mymodule.js

index.html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="./app.js"></script>
</body>
</html>

main.js和mymodule.js代码如下:

// main.js
require('./mymodule.js')();

// mymodule.js
module.exports = function() {
    document.write('hello webpack');
};

然后执行命令:

webpack main.js app.js

会打包生成app.js文件。

3. 配置文件

每次手动输入源文件名和输出文件名比较麻烦, 可以使用配置文件来进行管理。

在app目录下新建 webpack.config.js 文件,内容如下:

module.exports = {
    entry: './main.js',
    output: {
        filename: 'app.js'
    }
};

// 或者开启 watch 模式 (自动检测文件变化并制动编译)
module.exports = {
    entry: './main.js',
    output: {
        filename: 'app.js'
    },
    watch: true
};

// 然后输入 
// > webpack 
// webpack 当没有参数的时候回自动检测  webpack.config.js 并使用

配置文件中可以进行其它各种功能的相关配置,详情可以参看官方文档。

4. 使用loader

很多模块打包工具只是针对js文件, 而webpack的强大之处在于将模块的概念进行了扩展, 认为一切静态文件都是模块,包括css、html模板、字体、CoffeeScript等等。

虽然webpack本身依然是只能够处理js文件, 但是通过一系列的loader,就可以处理其它文件了。

下面以css-loaderstyle-loader为例, 演示如何打包样式文件。首先执行如下命令安装依赖模块:

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

然后在app目录下新建style.css文件,内容如下:

body {
    background: red;
}

然后修改main.js如下:

require('./mymodule.js')();
require('style!css!./style.css');

因为webpack不能够直接处理css文件, 因此在require语句中需要指明需要的loader, 一个文件可以经由多个loader依次处理, loader与loader之间, 以及loader与文件名之间用!分隔。

在这个例子中,也可以看出,如果使用了多个loader的话, 数据流向是 从右向左,从右向左 ,从右向左 的,

也就是从style.css开始,依次经过css-loader和style-loader。

但是假如有多个css文件的话, 每个require语句都需要加上loader说明, 很不方便,因此可以在webpack.config.js文件中进行配置,

配置如下:

loaders: [{
    test: /\.css$/,
    loader: 'style!css'
}]

// or

loaders: [{
    test: /\.css$/,
    loaders: ['style', 'css']
}]

5. 外部依赖

现在假如该例子中需要用到angular,

首先在index.html中通过 < script > 标签引入angular库,

然后修改mymodule.js如下:

var angular = require('angular');
angular.module('MyModule', []);

此时如果执行webpack命令会报如下错误:

ERROR in ./mymodule.js
Module not found: Error: Cannot resolve module 'angular' in /xxx/xxx/app
@ ./mymodule.js 1:14-32

这是因为webpack无法解析angular依赖模块, 此时需要在配置文件中对外部依赖进行配置:

externals: {
    'angular': true
}

6. 输出类型

现在假如我们希望打包后的文件作为一个单独的库, 并且遵循AMD规范可以被被requirejs来使用,可以修改配置文件如下:

output: {
    filename: 'app.js',
    library: 'app',
    libraryTarget: 'amd'
}

此时输出的app.js结构如下:

define("app", ["angular"], function( /* ... */ ) {
    /* ... */
});

通过配置output.libraryTarget, 可以自定义输出的模块类型, 包括AMD,CommonJS,变量等多种输出类型。

7. 多文件

现在假如项目目录结构如下:

/app
  |--components.js
  |--index.html
  |--main.js
  |--mymodule.js

其中mymodule.js被main.js和components.js所使用。 假如我们希望main.js输出为app.js,而components输出为app.components.js,则可以修改配置文件如下:

entry: {
    app: './main.js', 
    'app.coomponents': './components.js'
},
//  键为输入文件 , 键值为源文件

output: {
    filename: '[name].js'
}
// name 为通配符格式

关于 webpack 的功能有太多了, 但是如果记住上述的几个要领, 相信简单使用时没有问题的

Referrences:

http://www.html-js.com/article/Study-notes-webpack-tutorial

  • 文档信息:
  • 版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
  • 发表日期: 2016-11-2022:41:49+0800
  • 更多内容:
  • Feed订阅:
相关内容:

disqus评论区:

0