webpack配置

css没有打包进去,导致图标没有生成.把css当作js生成

webpack是前端资源模块化管理和打包工具，在某种程度上来说，是专门为前端开发量身打造的。在webpack出现之前，也有一些模块打包工具，但是功能都比较单一，在前端工程化的形势下，一个既能处理JS又能处理其他资源的模块打包工具显得尤为重要。它的目的就是把依赖关系的各种文件打包成一系列的静态资源，通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、 LESS 等。
下面主要以webpack.config文件为例，分析一下webpack的架构。

module.exports =  {
        context: process.cwd(),
        watch: true,
        entry: './index.js',
        devtool: 'source-map',
        output: {
            path: path.resolve(process.cwd(),'dist/'),
            filename: '[name].js'
        },
        resolve: {
            root: '/pomy/github/flux-example/src',
            extensions: ['', '.js', '.json', '.scss'],
            alias:{ jquery: 'src/lib/jquery.js', }
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                _: 'underscore',
                React: 'react'
            }),
            new WebpackNotifierPlugin()
        ],
        module: {
            loaders: [{
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },  {
                test: /\.less$/,
                loaders:['style-loader', 'css-loader','less-loader']
            }, {
                test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg|swf)$/,
                loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]"
            }, {
                test: /\.html/,
                loader: "html-loader?" + JSON.stringify({minimize: false })
            } ]
        }
    };

一、context

process.cwd()是nodejs的启动目录，确定了webpack的编译上下文。
webpack在确定webpack.config中entry的路径依赖时，会根据context来确定要编译文件的绝对路径。

二、watch

在文件改变的时候，让webpack动态更新。

三、entry

entry定义的是webpack编译的入口文件，可以是字符串或数组或者是对象。如果是数组，数组中的所有文件会打包生成一个filename文件；如果是对象，可以将不同的文件构建成不同的文件。

四、devtool

资源映射表，debug的时候编译的是原文件，而不是打包的文件，方便调试。

五、output

output参数是个对象，编译的终点。
path：代表打包文件存放的绝对路径。
filename：代表打包后的文件名。
当多个bundle输出的时候，filename中的name代表的是key/value（entry中）的key。

多个bundle输出

六、resolve

root
绝对路径，查找module是这里开始查找。
extensions
自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名。
alias
resolve.alias是对module模块提供别名，能够让开发者指定一些模块的引用路径。比方说，对于经常要被import或者require的库，如react，最好可以指定位置，有助于webpack打包优化。关于webpack打包优化后面需要另外专门介绍。

七、plugins

插件可以对每次build的结果进行处理，可以完成更多 loader 不能完成的功能。
社区上的plugins列表

八、module

webpack中所有的资源都是模块，不同模块的加载是通过模块加载器（webpack-loader）来统一管理的。loaders之间是可以串联的，一个加载器的输出可以作为下一个加载器的输入，最终返回到JavaScript上。

字段 说明

test

正则表达式，满足条件后，使用loader处理。

exclude

排除在loader的处理范围。

loader或者loaders

加载器，用来处理相关文件，将一种代码形式转换为另一种代码形式，例如：es6/7 ==> es5。

!定义loader的串联关系，多个loader之间用“!”连接起来

给css和less还有图片添加了loader之后，我们不仅可以 require() js文件，还可以 require() css、less甚至图片文件。