关于webpack的配置项说明

关于webpack的配置项说明

对Webpack的打包行为做了配置，主要分为几个部分：

• entry

• 指定打包的入口文件，每有一个键值对，就是一个入口文件。

• output

• 配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称，filename里面的name会由entry
  中的键（如entry1和entry2）替换。

• resolve

• 定义了解析模块路径时的配置，常用的就是extensions，可以用来指定模块的后缀，这样在引入模块时就不需要写后缀了，会自动补全。

• alias

• 定义路径别名或者文件别名，如：
• json alias: {"@": path.resolve(__dirname, "./src/") }
• 以上是将@字符的路径指向源码所在文件夹src，这样在源码内的文件引用就可以写成import xx from "@/service/xx"

• module

• 定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test
  的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。比如可以定义凡是.js
  结尾的文件都是用babel-loader做处理，而.jsx结尾的文件会先经过jsx-loader处理，然后经过babel-loader
  处理。当然这些loader也需要通过npm install安装。

• plugins

• 这里定义了需要使用的插件，比如commonsPlugin在打包多个入口文件时会提取出公用的部分，生成common.js

当然Webpack还有很多其他的配置，
具体可以参照它的配置文档

const webpack = require('webpack');
const commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
// const htmlWebpackPlugin = require('html-webpack-plugin'); //使用自动生成html文件的一个插件
const path = require('path');
module.exports = {
    
    
    entry: {
    
    
        entry1: "./src/blog",
        entry2: "./src/user"
    },
    output: {
    
    
        path: "./build",
        filename: '[name].entry.js'
    },
    resolve: {
    
    
        extensions: ['', '.js', '.jsx']
    },
    module: {
    
    
        loaders: [{
    
    
            test: /\.js$/,
            loader: 'babel-loader'
        }, {
    
    
            test: /\.jsx$/,
            loader: 'babel',
            exclude: "/node_modules/",
            //include:path.resolve(__dirname,"example")
        }]
    },
    plugins: [commonsPlugin],
    /*new htmlWebpackPlugin({
        title: ""
    })*/
};