webpack基础配置

webpack运行规则：

Webpack 会给每个模块分配一个唯一的id并通过这个id索引和访问模块。在页面启动时，会先执行入口文件中的代码，其它模块会在运行 require 的时候再执行。

运行时主要的参数

webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包，默认读取文件webpack.config.js

webpack --watch //监听变动并自动打包

webpack -p //压缩混淆脚本

webpack -d //生成map映射文件，告知哪些模块被最终打包到哪里了

webpack --display-error-details 打印错误详情。

还有一些看性能的参数：

webpack --colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤

webpack --profile 输出性能数据，可以看到每一步的耗时

webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块

webpack entry.js bundle.js 编译 entry.js 并打包到 bundle.js

配置文件

整个配置文件就是一个大的json，这个json需要用module.exports导出，常用有如下配置

1. entry:{}
2. output:{}
3. module:{}
4. resolve:{}
5. plugins:[]

1. entry

值可以为String,[String],Object

    {
        entry1: "./page1",
        entry2: ["./page2", "./page3"]
    }

value为数组形式时，将加载数组中的所有模块，但以最后一个模块作为输出

2. output

{
    path: './build', //决定文件在磁盘中的位置,最好是绝对路径
    filename: 'bundle.js'// 每个文件自己唯一的名字
    //最后打包出来的文件位置: ./build/bundle.js
    publicPath: 'http://mycdn.com/', // 用来生成URL
    chunkFilename:'',//非入口块的文件名
    sourceMapFilename:'',//SourceMaps的文件名,默认值是 `[file].map`
    library:'',//单独打包自己写的某个库，值为引用时需要的模块名
    libraryTarget:'',//规定库输出的格式，这两个参数一般在生成工具的配置文件中，不在项目打包文件中
}

filename可用变量：[name],[hash],[chunkhash]

chunkFilename可用变量：[id],[name],[hash],[chunkhash]

sourceMapFilename可用变量：[file],[id],[hash]

libraryTarget可选值：'var'(default),'this','commentjs','commentjs2','amd','umd'

3. module

loaders:[]

{
    test: 需要匹配的文件类型，用正则,
    loader: 需要使用的加载器,
    enclude:''/[],
    include:''/[],
    loader: 用!分割加载器,
    loaders: 一个加载器的数组
},

和loaders相似的两个参数：module.preLoaders, module.postLoaders，区别只在于时机不同

loader和loaders

1. 加载器需要单独下载，'-loader'可以省略不写,这个命名规则和搜索优先级顺序在 webpack 的 resolveLoader.moduleTemplates api 中定义。
   
   Default: ["-webpack-loader", "-web-loader", "-loader", ""]
2. 多个加载器处理同一类型文件用'!'连接
3. loader的配置信息的参数写到'?'后面
4. loader添加方法：
   • 在 webpack 全局配置中进行绑定，写在配置文件中
   • 引用模块的时候添加，如：require("!style!css!./style.css")
   • 通过命令行的方式使用。比如webpack entry.js bundle.js --module-bind 'css=style!css'
     
     Loader 可以同步或异步执行。

noParse

值为正则或正则数组

内容为不需用loader解析的东西

4. plugins

包括系统插件和扩展插件

CommonsChunkPlugin

作用：用于提取多个入口文件的公共脚本部分

    entry: {
        p1: "./page1",
        p2: "./page2",
        p3: "./page3",
        ap1: "./admin/page1",
        ap2: "./admin/page2"
    },
    output: {
        filename: "[name].js"
    },
    plugins: [
        new CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]),
        new CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js"])
    ]
     script--- required:
     page1.html: commons.js, p1.js
     page2.html: commons.js, p2.js
     page3.html: p3.js
     admin-page1.html: commons.js, admin-commons.js, ap1.js
     admin-page2.html: commons.js, admin-commons.js, ap2.js

5. externals

不希望webpack把这个库打包进代码,一般配合libraryTarget使用

值可以为json, 字符串, 函数, 正则, 数组

    externals: {
            "react": "React",
    }
    //对应于const React=require('react');

6.resolve

Webpack 的配置提供了 resolve 和 resolveLoader 参数来设置模块解析的处理细节，resolve 用来配置应用层的模块（要被打包的模块）解析，resolveLoader 用来配置 loader 模块的解析。

    {
        //查找module的话从这里开始查找
        root: 'E:/github/flux-example/src', //绝对路径
        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名,注意一下, 第一个是空字符串! 对应不需要后缀的情况.
        extensions: ['', '.js', '.json', '.scss'],
        //模块别名定义，方便后续直接引用别名，无须多写长长的地址,也可以省下不少搜索硬盘的时间。
        alias: {
            AppAction : 'js/actions/AppAction.js'
        }
        //后续直接require('AppAction') 即可
    }

高级使用：shimming

推荐参考：shimming:https://github.com/webpack/docs/wiki/shimming-modules

在 AMD/CMD 中，我们需要对不符合规范的模块（比如一些直接返回全局变量的插件）进行 shim 处理，这时候我们需要使用 exports-loader 来帮忙：

{ test: require.resolve("./src/js/tool/swipe.js"), loader: "exports?swipe"}

之后在脚本中需要引用该模块的时候，这么简单地来使用就可以了：

require('./tool/swipe.js');

swipe();

使用 script.js 在脚本中来加载我们的模块：

var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
  $('body').html('It works!')
});