Webpack入门

Posted on Edited on In

如何使用 Webpack

  1. 首先安装 Webpack 和 webpack-dev-server
    $ npm i -g webpack webpack-dev-server（webpack-dev-server 是用来在本地启动服务器方便本地调试而安装的）
  2. 运行 $ webpack -h 命令可以显示帮助信息，说明 webpack 已经安装完成。

在常规项目开发中，更好的做法是将 webpack 直接写入 package.json 中方便维护
$ npm init $ npm i webpack --save-dev

Webpack是个啥？

webpack 是一个类似 Gulp 和 Grunt 的前端构建工具，它可以用来进行代码和资源的模块化，使用者可以使用它对项目方便地进行依赖管理；可以使用 Data URI 来替换体积较小的图片文件，来提升图片的加载速度。除此之外，还可以使用自定义的插件对项目进行自动化构建操作。

配置

每个项目下都必须配置有一个 webpack.config.js，它的作用如同 gulpfile.js/Gruntfile.js ，告诉 webpack 它需要做什么。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
    //插件项
    plugins: [commonsPlugin],
    //页面入口文件配置
    entry: {
        page1 : './src/js/page/page1.js',//支持数组类型
        page2 : ['./src/js/page/page2.js','./src/js/page/page3.js']
    },
    //入口文件输出配置
    output: {
        path: 'dist/js/page',//可以省略，默认输出在配置文件的目录下
        filename: '[name].js'//name就是entry中的key
    },
    module: {
        //加载器配置
        loaders: [
            //test配置要匹配的文件后缀，loader配置要是用的加载器（用!来分割多个加载器，以下代码中的-loader可以不写，?来为加载器传入参数）
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //.js 文件使用 jsx-loader 来编译处理
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
            
        ]
    },
    //其它解决方案配置
    resolve: {
        //配置查找 module 的根路径
        root: '/User/github/example/src', //绝对路径
        //配置支持自动扩展的文件名后缀，require 的时候就不需要写这些文件的后缀名了
        extensions: ['', '.js', '.json', '.scss'],
        //配置模块的别名，方便直接进行加载,
        //eg: require('AppStore') = require('js/stores/AppStores.js')
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    },
    //如果需要使用外部资源的时候，先在HTML里面加入script标签引入外部资源，然后在externals里面进行配置
    externals: {
        // jquery 引用自外部模块的，在这里配置了之后就可以直接在代码里面使用 require('jquery') 了
        // 但是要注意使用外部资源的 js 需要放在外部资源加载之后再进行加载
        // 对应全局变量 jQuery
        "jquery": "jQuery"
    }
};

用到加载器的时候需要先进行安装，比如我们用到的 url-loader 需要使用
$ npm i url-loader --save-dev 来安装之后再可以在 webpack 中使用。

运行

直接执行 $ webpack --display-error-details 命令就可以运行 webpack 了，后面的参数是用来显示错误信息而添加的，方便 debug 的时候查找错误的来源。

其他主要的参数有：

1
2
3
4
5
6
7
$ webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）来打包

$ webpack --watch   //监听变动并自动打包

$ webpack -p    //生产版本构建，压缩混淆脚本

$ webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里了

例子

github 上有一个外国人做的 webpack demo，栗子很多，适合入门学习
地址：https://github.com/ruanyf/webpack-demos

参考

  1. Data URI 一种加快图片加载的方式（基于 base64 编码数据和 cpu 实时演算）
  2. 一小时包教会 —— webpack 入门指南
  3. Webpack打包进阶