浅谈Webpack(一)

webpack官方文档

什么是webpack?

Webpack 是一个前端资源加载/打包工具(Module Bundler)，它能把各类资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都做为模块来使用和处理。

只须要相对简单的配置就能够提供前端工程化须要的各类功能，而且若是有须要它还能够被整合到其余好比 Grunt / Gulp 的工做流。

咱们能够直接使用 require(XXX) 的形式来引入各模块，即便它们可能须要通过编译（好比JSX和sass），但咱们无须在上面花费太多心思，由于 webpack 有着各类健全的加载器（loader）在默默处理这些事情。

为何使用webpack?

如今的网站已经演化成 web app：

• 一个页面内依赖着愈来愈多的 JavaScript
• 现代浏览器有着愈来愈多的
• 虽然单页内代码愈来愈多，但全页刷新愈来愈少

这意味着，客户端有着愈来愈多的代码。

一个大的代码库须要良好的组织，这须要模块系统来把代码库拆分红模块。

加载器loader

loader是把一个资源文件做为入参转换为另外一个资源文件的 node.js 函数。

例如，能够经过loader来让 webpack 来加载 CoffeeScript 或 JSX 文件。

若是loader发布在 npm 上，那么能够经过下面的两个命令来安装

$ npm install xxx-loader --save
$ npm install xxx-loader --save-dev

安装webpack

$ npm install -g webpack

 

配置webpack

每一个项目下都必须配置有一个 webpack.config.js ，它就是一个配置项，告诉webpack它须要作什么

看示例：

 1 const webpack = require('webpack');
 2 
 3 module.exports = {
 4   devtool: 'inline-source-map',
 5 
 6   //页面入口文件配置
 7   entry: [
 8     './public/entry.jsx',
 9     'webpack-hot-middleware/client'
10   ],
11 
12   //入口文件输出配置
13   output: {
14     path: __dirname,
15     publicPath: '/assets/',
16     filename: 'bundle.js'
17   },
18   module: {
19     //加载器配置
20     loaders: [{
21       test: /\.(js|jsx)$/,
22       exclude: /node_modules/,
23       loader: 'babel',
24       query: {
25         presets: ['es2015', 'react']
26       }
27     },
28     {
29       test:/\.css$/,
30       exclude:/node_modules/,
31       loader:'style!css'
32     },
33     {
34       test: /\.(woff|woff2)$/,
35       loader: 'url-loader?limit=10000&mimetype=application/font-woff'
36     },
37     {
38       test: /\.ttf$/,
39       loader: 'url?limit=10000&mimetype=application/octet-stream'
40     },
41     {
42       test: /\.eot$/,
43       loader: 'file'
44     },
45     {
46       test: /\.svg$/,
47       loader: 'url?limit=10000&mimetype=image/svg+xml'
48     },
49     {
50       test: require.resolve('jquery'),
51       loader: 'expose?$!expose?jQuery'
52     },
53     {
54       test: /\.(png|jpg)$/,
55       loader: 'url-loader?limit=8192'
56     }
57     ]
58   },
59 
60   //插件项 
61   plugins: [
62     // Webpack 1.0
63     new webpack.optimize.OccurenceOrderPlugin(),
64     // Webpack 2.0 fixed this mispelling
65     // new webpack.optimize.OccurrenceOrderPlugin(),
66     new webpack.HotModuleReplacementPlugin(),
67     new webpack.NoErrorsPlugin()
68   ]
69 };

一、plugins是插件项，这里咱们用了三个插件方法：

webpack.optimize.OccurenceOrderPlugin(),webpack.HotModuleReplacementPlugin(),webpack.NoErrorsPlugin();

(1).webpack 给每一个模块和分块分配了 id 来识别它们。webpack 能够经过new webpack.optimize.OccurenceOrderPlugin()给最经常使用的 id 分配最简短的 id 来进行优化;

(2).webpack.NoErrorsPlugin()是选择性的，主要的功能是当更改完的程序码有语法错误时不要从新整理。当错误修改后，画面会自动从新整理。

(3).webpack.HotModuleReplacementPlugin()：Webpack-dev-server结合后端服务器的热替换配置

 

二、entry 是页面入口文件配置，output 是对应输出项配置（即入口文件最终要生成什么名字的文件、存放到哪里），其语法大体为：

 1 {
 2     entry:{
 3         page1: "./page1",
 4         //支持数组形式，将加载数组中的全部模块，但以最后一个模块做为输出
 5         page2: ["./entry1", "./entry2"]
 6     },
 7     output:{
 8         path: "dist/js/page",
 9         filename: "[name].bundle.js"
10     }
11 }

该段代码最终会生成一个 page1.bundle.js 和 page2.bundle.js，并存放到 ./dist/js/page 文件夹下。

 

三、module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都须要使用什么加载器来处理：

module: {
        //加载器配置
        loaders: [
            //.css 文件使用 style-loader 和 css-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'}
        ]
    }

如上，"-loader"实际上是能够省略不写的，多个loader之间用“!”链接起来。

注意全部的加载器都须要经过 npm 来加载，并建议查阅它们对应的 readme 来看看如何使用。

关于 webpack.config.js 更详尽的配置能够参考这里。

运行webpack

$ webpack --display-error-details

后面的参数“--display-error-details”是推荐加上的，方便出错时能查阅更详尽的信息（好比 webpack 寻找模块的过程），从而更好定位到问题。

 

参考资料：http://www.cnblogs.com/vajoy/p/4650467.html