webpack的入门

webpack介绍

webpack是一个模块打包器。把模块连同它的依赖一起打包生成包含这些模块的静态资源。
可以将CSS、模板，甚至是自定义的文件格式当做JavaScript模块来使用。

webpack能干什么

他类似browserify 但是可以把你的应用分离成许多文件，如果你有许多页面在你的单页应用里面，用户只需要下载当前页面所需要的代码。如果你跳转到另一个页面，他们不需要重新加载通用的代码。
他能替代grunt或者gulp大部分的功能因为他可以构建和打包CSS，预处理CSS，编译JS和打包处理图片，甚至更多事情。
他支持AMD和CommonJs以及其他的模块化系统（Angular，ES6）。如果你不知道用什么，那么可以用CommonJs。

webpack安装

安装node.js

打开nodejs官网，点击下载按钮，它会根据系统信息选择对应版本。然后安装。查看是否正确安装：命令提示符执行node -v，出现版本号即为正确安装。

webapck安装

npm init (最好先实例化package.json文件)
npm install webpack -g(全局安装webpack)
npm install webpack --save-dev(项目中安装webpack)
npm install webpack-dev-server --save-dev（安装本地webpack服务，并保存到package.json文件中）

webapck使用

和gulp一样，webpack也需要在项目根目录中新建一个配置文件（webpack.config.js）如下：

var webpack = require('webpack');

module.exports = {
    //插件项
    plugins: [
        //提公用js到common.js文件中
        new webpack.optimize.CommonsChunkPlugin('common.js'),
        //将样式统一发布到style.css中
        new ExtractTextPlugin("style.css", {
            allChunks: true,
            disable: false
        }),
        //使用ProvidePlugin加载使用频率高的模块
        new webpack.ProvidePlugin({
            $: "webpack-zepto"
        })
    ],
    //页面入口文件配置
    entry: {
        index : './src/main.js'
    },
    //入口文件输出配置
    output: {
        path: __dirname +'/dist/',
        filename: '[name].js'
    },
    module: {
        //加载器配置
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    //其它解决方案配置
    resolve: {
        extensions: ['', '.js', '.json', '.scss'],
        alias: {
            filter: path.join(__dirname, 'src/filters')
        }
    }
};

entry

entry页面入口文件配置，可以是一个或者多个入口文件，可以是对象格式或者数组格式。如下：
1
2
3
4
entry: {
index : './src/main.js'
}
entry:['./src/main.js','./src/index.js']

output

output 是对应输出项配置,主要包括path,filename和publishPath属性。
path代表输出的路径，
filename代表输出的文件名称，
publishPath代表静态资源发布后的前缀地址。

module.loaders

module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理，和gulp中的插件类似，如要使用需要先用npm安装

module: {
    //加载器配置
    loaders: [
        //.css 文件使用 style-loader 和 css-loader 来处理
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        //.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'}
    ]
}

loader主要有3种使用方式：

require("url-loader?mimetype=image/png!./file.png");在页面里面引用资源
{ test: /.png$/, loader: "url?mimetype=image/png" };在webpack.config.js文件夹中使用
webpack --module-bind "png=url-loader?mimetype=image/png"; 在命令行中编译使用
-loader其实是可以省略不写的，多个loader之间用“!”连接起来。

plugins
plugins 是插件项，这里我们使用了一个 CommonsChunkPlugin 的插件，它用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用

plugins: [
    //提公用js到common.js文件中
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    //将样式统一发布到style.css中
    new ExtractTextPlugin("style.css", {
        allChunks: true,
        disable: false
    }),
    //使用ProvidePlugin加载使用频率高的模块
    new webpack.ProvidePlugin({
        $: "webpack-zepto"
    })
]

插件分为两种

一种是webpack自带的一些插件
一种是通过npm安装的插件

resolve
resolve 配置可以省略后缀，添加别名。如下：

resolve: {
    // require时省略的扩展名，如：require('module') 不需要module.js
    extension: ['', '.js'],
    //别名
    alias: {
        filter: path.join(__dirname, 'src/filters')
    }
}

Webpack-dev-server使用

webpack-dev-server是基于node.js Express服务，它同时包含了一个基于Socket.IO轻量的运行时环境。

'use strict'
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
// 配置代码自动编译和热替换插件
config.entry.unshift('webpack-dev-server/client?http://localhost:9090', "webpack/hot/dev-server");
config.plugins.push(new webpack.HotModuleReplacementPlugin());
// 这里配置：请求http://localhost:9090/index.php，
// 相当于通过本地node服务代理请求到了http://testapi.uhouzz.com/index.php
var proxy = [{
    path: "/index.php/*",
    target: "http://pc.uhouzz.com",
    host: "pc.uhouzz.com"
}]
//启动服务
var app = new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot:true,
    historyApiFallback: true,
    proxy:proxy
});
app.listen(9090);

如上，引用webpack和webpack-dev-server模块，通过WebpackDevServer启动服务，通过HotModuleReplacementPlugin插件启动代码自动编译页面自动刷新。这样，当你修改了html、js或者样式文件，页面会自动编译刷新。

webapck命令

webpack 执行一次开发时的编译
webpack -p 执行一次生成环境的编译（压缩）
webpack --watch 在开发时持续监控增量编译（很快）
webpack -d 让他生成SourceMaps
webpack --progress 显示编译进度
webpack --colors 显示静态资源的颜色
webpack --sort-modules-by, --sort-chunks-by, --sort-assets-by 将modules/chunks/assets进行列表排序
webpack --display-chunks 展示编译后的分块
webpack --display-reasons 显示更多引用模块原因
webapck --display-error-details 显示更多报错信息

2016-11-25