webpack总结

webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

安装

npm install webpack --save-dev

配置文件

webpack的配置文件一般长这样，稍后再对每一部份做讲解。

//webpack.config.js

var path = require("path");

module.exports = {
    entry: path.resolve(__dirname,"src/main.js"),
    output:{
       path: path.resolve(__dirname,"dist/js"),
       filename:"bundle.js"
    },
    module:{
        loaders:[{
            test:"/\.js$/",
            loader:"babel-loader",
            exclude: path.resolve(__dirname,"node_modules"),
            include:path.resolve(__dirname,"src"),
            query:{
                 presets:["env"]
            }
        }]
    }
}

path:是nodejs自带的模块，需要引入
__dirName: 当前文件(webpack.config.js)所在目录

entry: 入口文件所在路径。可以是string、array或者object
output:输出文件所在路径及输出文件名称

下面配置entry是对象(object)时的情况:

var path = require("path");

module.exports = {
    entry: {
        main:path.resolve(__dirname,"src/main.js"),
        a:path.resolve(__dirname,"src/a.js")
    },
    output:{
       path: path.resolve(__dirname,"dist/js"),
       filename:"[name].js"
    },
    module:{
        loaders:[{
            test:"/\.js$/",
            loader:"babel-loader",
            exclude: path.resolve(__dirname,"node_modules"),
            include:path.resolve(__dirname,"src"),
            query:{
                 presets:["env"]
            }
        }]
    }
}

注意:我改了两个地方。第一个是在entry下，路径前加了属性(name,a);第二个是在output下的filename处,我把bundle改成了[name]--(这里name可以使用hash、chunkhash或者3者随意组合)代替。

这样设置配置文件后，运行webpack命令后，会在输出目录处得到两个文件(main.js a.js)。

如果[name]改成[hash]或者[chunkhash],那么输出目录的文件名就是随机的了(具体是怎么样的，我也不清楚)

运行

webpack
webpack --config "config file's path"

另外，还可以通过npm命令来运行，需要先在package.json文件中的script属性下加入以下脚本：

“webpack”:"webpack --progress --display-modules --colors"
然后运行npm run webpack

loader

配置文件里都有一个loaders属性，它是一个数组，可以配置多个loader。

我们可以看到已经配置了一个叫babel-loader的东东了，babel-loader是用来转换es6语法的。

使用babel-loader需要事先引入babel-loader和babel-core,所以

npm install babel-loader babel-core --save-dev

loaders:[{
    test:"/\.js$/",
    loader:"babel-loader",
    exclude: path.resolve(__dirname,"node_modules"),
    include:path.resolve(__dirname,"src"),
    query:{
         presets:["env"]
    }
}]

test: 正则表达式(只处理js文件)
exclude:排除某些文件
include：包含的文件\文件夹
query: //TODO

插件

//TODO