webpack入门

webpack

什么是webpack

webpack是一个模块加载器和打包工具。不只是js文件，webpack把所有资源当作模块（js、图片、样式表、模板等）来处理和使用。

优势：

  • 将依赖树分隔成块按需加载
  • 减少初始化加载时间
  • 所有静态资源都可以模块化
  • 扩展性强，插件机制完善
  • webpack以commonJS形式书写脚本，也支持AMD/CMD，因此便于代码迁移

使用

安装

直接使用npm进行安装：

1
npm install webpack -g

或者将依赖加入项目的package.json

1
npm install webpack --save-dev

基础

1
// style.css
body {
    background: yellow;
}
// content.js
module.exports = "It works from content.js";
// entry.js
require('!style!css!./style.css');
document.write(require('./content.js'));
// index.html
<script type="text/javascript" src="bundle.js"></script>

使用以下命令运行

1
npm install css-loader style-loader
webpack ./entry.js bundle.js

webpack编译时只能使用javascript处理，所以处理css文件，需要安装css-loader和style-loader。安装loader不使用-g。

我们可以将css扩展名绑定到加载器中

1
// entry.js
require('./style.css');

运行

1
webpack ./entry.js bundle.js --module-bind 'css=style!css'

将编译命令通过配置文件配置

1
// webpack.config.js
module.exports ={
    entry: 'entry.js',
    output: {
        path: _dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: 'style!css'}
        ]
    }
}

使用webpack即可运行，等同webpack ./entry.js bundle.js --module-bind 'css=style!css'。

编译添加进度条和颜色

1
webpack --progress --colors

服务端显示

1
npm install webpack-dev-server -g
webpack-dev-server --progress --colors

loaders

特性

  • 链式调用
  • 支持同步或异步
  • 支持查询参数
  • 支持文件扩展名、正则

使用

使用require关键字

1
require('style!css!./style.css');
require('jade!./template.jade');

使用配置文件

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

使用CLI

1
webpack ./entry.js bundle.js --module-bind 'css=style!css'

查询参数

使用require关键字

1
require('url-loader?mimetype=image/png!./file.png');

使用配置文件

1
{test: /\.png$/, loader: 'url-loader?mimetype=image/png'}
// or
{test: /\.png$/, loader: 'url-loader', query: '{mimetype: 'image/png'}}

使用CLI

1
webpack ./entry.js bundle.js --module-bind 'png=mimetype=image/png'

plugins

在配置文件webpack.config.js使用

1
var AggressiveMergingPlugin = require("./AggressiveMergingPlugin");
module.exports = {
    plugins: [
        new AggressiveMergingPlugin({
            minSizeReduce: 1.5,
            moveToParents: true
        })
    ]
}

webpack配置

使用CLI

缺省的配置文件名为webpack.config.js，你也可以使用命令--config来指定文件名

1
// webpack.myconfig.js
module.exports = {
}
// run
webpack --config webpack.myconfig.js

使用node.js

1
webpack({
    // 配置
}, callback);

context

根目录的绝对路径，缺省为process.cwd()。

entry

值可以是字符串、数组和对象

1
entry: './entry'
entry: ['./entry1', './entry']
entry: {
    pageA: './pageA',
    pageB: './pageB',
    pageC: ['./pageC', './pageD'
}

output

1
{
    entry: './entry.js',
    // 勿使用绝对路径
    output: {
        filename: 'bundle.js',
        path: './built'
    }
}
{
    entry: {
        pageA: './pageA',
        pageB: './pageB'
    }
    output: {
        filename: '[name].js',
        path: './built'
    }
}

publicPath指定在页面文件的引用url路径

1
// config.js
output: {
    path: '/public/assets',
    publicPath: '/assets/'
}
// htnl
<link href="/assets/image.gif" />

moudle.loaders

1
{
    module.loaders: {
        // 匹配扩展名
        test: /\.css$/, 
        // 匹配文件夹
        include：[path.resolve(__dirname, 'app/src')],
        loader: 'style!css'
        //or 
        // loaders: ['style', 'css']
    }
}