webpack基本配置

1. webpack有三个基础部分：

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

• 入口文件：

glob: node-glob学习. node的glob模块允许你使用 *等符号, 来写一个glob规则,像在shell里一样,获取匹配对应规则的文件.这个glob工具基于javascript.它使用了 minimatch 库来进行匹配.

const glob = require('glob');

glob.sync('./client/*').forEach(function (filepath) {
    const dirName = path.basename(filepath);
    entries[dirName] = [path.resolve(__dirname, '../', filepath)]; // 转换成绝对路径
}); 
// 同步获取文件


// 执行结果
 ./client/common --------------------filepath
common [ '/home/jr/fe/myProject/client/common' ] ------------dirname
./client/index --------------------filepath
index [ '/home/jr/fe/myProject/client/index' ] ------------dirname

__dirname: 总是返回被执行的 js 所在文件夹的绝对路径

__filename: 总是返回被执行的 js 的绝对路径

process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径

• output:

filename：每个文件的名称，默认值是 '[name].js'(模块名称)

chunkFilename:这个选项决定了按需加载的块文件的名称

path: 静态资源输出的路径

publicPath:加载外部资源的路径

• module: webpack的loarder相当于一个中间件 Webpack构建之法，Loader

preLoaders: preLoaders就是在调用loader之前需要调用的loader, 他不做任何代码的转换，只是进行检查。

devtool:其实就是选择一种调试代码的方式.

webpack devtool配置简单对比. 可以设断点调试，不显示列信息，生成相应的.Map文件，并在合并后的代码尾部加上注释//# sourceMappingURL=**.js.map ，可以看到模块代码并没有被eval()包裹，此种模式并没有将调试信息放入D打包后的代码中，保持了打包后代码的简洁性

query： preset 预设组件加载和使用。
plugins 插件加载和使用。

url-loader: url-loader?limit=1000&mimetype=xxx&name=xx

.demo {
 background-image: url('a.png');
}

那么对应这样的 loader 配置就能把 a.png 抓出来, limit 限制文件小于1kb, mimetype指定文件类型

{
     test: /jquery\.lazyload\.min\.js/,
     loader: 'imports?jQuery=jquery',
},

imports?jQuery=jquery，jquery.lazyload依赖于jQuery，用import引入jQuery

• vue:
• imageWebpackLoader:
• postcss:http://wiki.shanyishanmei.com/pages/viewpage.action?pageId=5453410
• plugins:

HotModuleReplacementPlugin:
ExtractTextPlugin: 将所有css打包成一个css文件
AssetsPlugin: 生成静态资源依赖文件
LiveReloadPlugin

• resolve:主要是用来配置解析模块路径和分析依赖

resolve.alias: 别名是 Webpack 的一个配置项，它的作用是把用户的一个请求重定向到另一个路径 。如果在alias中定义了值，然后在代码中require该值的时候，会重定向到alias指定的位置。

resolve.modulesDirectories: 是用来设置搜索的目录名的，默认值:["web_modules", "node_modules"]。如果把值设置成["mydir"]
, webpack会查询 “./mydir”, “../mydir”, “../../mydir”等。

• eslint: 在全局环境配置eslint入口