webpack总结

context: __dirname + '\\app', //上下文
entry: './index.js', //入口文件

注：webpack中引入的path是nodejs内置的package，用来处理路径 —— 参考菜鸟教程node.js工具模块。

当entry是数组的时候，里面同样包含入口js文件，另外一个参数可以是用来配置webpack提供的一个静态资源服务器，webpack-dev-server。webpack-dev-server会监控项目中每一个文件的变化，实时的进行构建，并且自动刷新页面：

entry: [
    'webpack/hot/only-dev-server',
    './js/app.js'
]

当entry是个对象的时候，我们可以将不同的文件构建成不同的文件，按需使用。每一个键值对，就是一个入口文件。

备注：当然也有其他的办法，如express框架，在index.html同路径建立一个server.js，然后运行 node server.js即可。

// express 是一个基于Node.js 平台的web应用开发框架 —— 快速、极简、开放
var port = 8000,
express = require('express'),
app = express();
app.use('/', express.static(__dirname));
app.listen(port);
console.log('Now serving http://localhost:' + port + '/index.html');

（2）output

生成打包文件的配置，可以指定path（路径），当有多个入口文件时，还可以使用[name]、[hash]、[chunkhash]等值，来对应替换为入口的文件的配置。

output: { //输出构建后的文件
    path: path.resolve(__dirname, 'app/build/script'),
    filename: 'bundle.js'
}

当entry中定义构建多个文件时，filename可以对应的更改为[name].js用于定义不同文件构建后的名字。

entry: {
    index: 'index.js'
},
output: {
    path: './js',
    filename: '[name].bundle.js' // [name] 会由entry中的键（这里是index）替换
}

（3）module

定义了对模块的处理逻辑，在webpack中，所有的资源都被当做模块。对于不同文件类型的资源，都有对应的loader。
模块的加载相关配置定义在module.loaders中。

loaders: 加载器配置，通过正则表达式去匹配不同后缀的文件名，然后给它们定义不同的加载器。它可以转换项目中的资源文件，比如说给css文件定义串联的两个加载器（！用来定义级联关系），顺序是从右向左使用：

module: {
    loaders: [
        { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
        { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
        { test: /\.css$/, loader: "style!css" },
        { test: /\.less/, loader: 'style-loader!css-loader!less-loader'}
    ]
}

其中，exclude: /node_modules/，
exclude,include手动添加屏蔽不需要处理的文件（文件夹）或必须处理的文件（文件夹）

比较常用的loader：

css-loader： 将样式打包成字符串。
style-loader：将样式字符串添加到页面的style标签中 

还可以添加用来定义png、jpg这样的图片资源在大于8k时正常打包，小于8k时自动处理为base64图片的加载器：

{ test: /\.(png|jpg)$/,loader: 'url-loader?limit=8192'}

其中，? 表示加载器支持通过查询字符串的方式接受参数。

给css和less还有图片添加了loader之后，我们不仅可以像在node中那样require js文件了，我们还可以require css、less甚至图片文件：

require('./bootstrap.css');
require('./myapp.less');
var img = document.createElement('img');
img.src = require('./glyph.png');

这样require来的文件会内联到 js bundle中。如果我们需要保留require的写法又想把css文件单独拿出来，可以使用[extract-text-webpack-plugin]插件。

（4）plugins

插件，它可以干很多很多的事情，非常强大，官方提供了很多插件，第三方也可以写插件。对于用到的插件，只需要将插件new出来放到数组中即可。

BannerPlugin 内置插件来实践插件的配置和运行，这个插件的作用是给输出的文件头部添加注释信息。
ProvidePlugin 插件的作用是自动加载jquery模块，也就是说将jquery变成了全局的模块，当然我们需要在index.html中使用script标签导入。

plugins: [
    new webpack.BannerPlugin('This file is created by shiddong.'),
    // 此插件会自动加载jquery,解决jquery无法引用的问题
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        window.jQuery: "jquery"
    })
]