webpack简读

1 > 什么是Webpack

     无论你是jsx,tsx,html,css,scss,less,png文件，webpack一视同仁为module。并且每个文件[module]都会经过相同的编译工序 loader==> plugin。

　　

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

2> 怎么安装Webpack

• 安装webpack

　　使用npm install webpack -g，webpack全局安装到了本地环境中，就可以使用webpack命令了。

 

• 在项目中使用webpack

 

• • 通过npm init实例化package.json文件。
  • 通过npm install webpack --save-dev安装webpack到package.json文件中。
  • 或者通过npm install webpack@1.2.x --save-dev安装指定版本的webpack到package.json文件中。
  • 通过npm install webpack-dev-server --save-dev安装dev tools到package.json文件中，本地运行webpack服务。

---

 

3> webpack在开发者社区的反馈

 

类似gulp把自己定位为stream building tools一样，webpack把自己定位为module building system。
在webpack看来，所以的文件都是模块，只是处理的方式依赖不同的工具而已。

webpack同时也把node的IO和module system发挥的淋漓尽致。 webpack在配合babel(ES6/7)和tsc(typescript)等类似DSL语言预编译工具的时候，驾轻就熟，为开发者带来了几乎完美的体验。

4> webpack整体架构(以webpack.config主要部分进行划分)

1. entry: 定义整个编译过程的起点
2. output: 定义整个编译过程的终点
3. module: 定义模块module的处理方式
4. plugin 对编译完成后的内容进行二度加工
5. resolve.alias 定义模块的别名

5> 怎么使用Webpack

1、安装webpack后，可以使用webpack这个命令行工具。主要命令：webpack <entry> <output>。可以切换到包含webpack.config.js的目录运行命令：

• 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 显示更多报错信息

6> 每个项目下都必须配置有一个 webpack.config.js，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。
下面看一个简单的示例：

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')
        }
    }
};

7>配置文件介绍

entry

entry是页面入口文件配置，可以是一个文件或者多个入口文件，可以是对象格式或者数组格式。

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 每一种文件都需要使用什么加载器来处理。点击这里可以查看loader list

module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理。点击这里可以查看loader list。

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'}
    ]
}

9》loader主要有3种使用方式：

1、在页面里面引用资源使用

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

  2、在webpack.config.js文件夹中使用

• { test: /.png$/, loader: "url?mimetype=image/png" };

  3、在命令行中编译使用

• webpack --module-bind "png=url-loader?mimetype=image/png";

如上，"-loader"其实是可以省略不写的，多个loader之间用“!”连接起来。
注意所有的加载器都需要通过 npm 来加载，并建议查阅它们对应的 readme 来看看如何使用。
拿最后一个 url-loader 来说，它会将样式中引用到的图片转为模块来处理，使用该加载器需要先进行安装：
npm install url-loader -save-dev
配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式（其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）。也可以使用file-loader来加载资源文件。

10》 使用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或者样式文件，页面会自动编译刷新。

 11》 html页面使用

直接在页面引入 webpack 最终生成的页面脚本和样式文件即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>webpack test</title>
    <link rel="stylesheet" href="/dist/style.css">
</head>

<body>
    <div id="app"></div>
    <script src="/dist/common.js"></script>
    <script src="/dist/build.js"></script>
</body>
</html>

 12》 总结

基于 webpack 的入门教程就到这里，希望本文能对你有所帮助，你也可以参考下面的项目进行参考。
Vue-cnodejs,基于Vue.js重写的cnodejs的webapp,其中采用的webpack进行打包处理。