webpack学习-webpack.config.js配置

webpack是一个用于完成模块加载、编译、打包等工作流的一整套前端工程发布用基于node开发的工具。配置文件为webpack.config.js，输出一个配置对象。配置文件主要配置：

• 入口entry
• 出口output
• 插件项plugins
• 加载器module.loaders
• 其他解决方案配置resolve，如补全resolve.extensions
• 其他…如搭建服务器devServer

---

配置文件预览

以下做个简单的配置文件，之后用于分析：

var webpack = require('webpack')

module.exports = {
    entry: {
        index: './src/index.js'
    },
    output: {
        path: './dist',
        publicPath: 'dist/',
        filename: 'build.js'
    },
    module: {
        loaders: [
            {
                // edit this for additional asset file types
                test: /\.(png|jpg|gif)$/, 
                loader: 'url-loader?limit=8192'
            },
            {
                test: /\.js$/,
                exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
                loader: 'babel'
            },
            {   test: /\.css$/, 
                loader: 'style-loader!css-loader?sourceMap' 
            },
            {   
                test: /\.scss$/, 
                loader: "style!css!sass?sourceMap"
            },
            { 
                test: /\.(woff|svg|eot|ttf)\??.*$/,
                loader: 'url-loader?limit=50000&name=[path][name].[ext]'
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ]
}

---

1.引入webpack

2.入口配置

entry: {
        index: './src/index.js'
    },

这里主要配置应用入口，入口文件应该包括整个项目的路由和主页面渲染render。

3.出口配置

output: {
    path: './dist',
    publicPath: 'dist/',
    filename: 'build.js'
},

path配置输出路径，publicPath目前没有感觉到用处，查了资料说，此属性当引用静态资源和cdn时，就有用了，先记着。filename可以有，也可以没有，没有的话则会和入口文件保持同名。

4.插件项配置

其实这里的配置还是很有用的。例如：
- 提取模块化引用公共部分，生成common.js文件进行复用的插件commonsPlugin：

plugins: [commonsPlugin],

• 打包过程中的错误提示插件BellOnBundlerErrorPlugin：

var BellOnBundlerErrorPlugin = require('bell-on-bundler-error-plugin')

//...
{
    plugins: [
        new BellOnBundlerErrorPlugin()
    ]
}

附上BellOnBundlerErrorPlugin插件的github地址：https://github.com/senotrusov/bell-on-bundler-error-plugin

当然，这里的插件还有很多，官网上有详细列表1。

5.加载器配置

首先，module.loaders是一个数组，可以配置多个加载器，然后每一个加载器对象都有test和loader属性，一个用于匹配文件，一个用于配置使用什么样的加载器来编译加载。例如：

{   
    test: /\.scss$/, 
    loader: "style!css!sass?sourceMap"
}

这是一个匹配sass文件的加载器，loader中多个编译器需要用!来分隔，执行顺序是从右向左。
对于图片文件，我们通常会使用url-loader，如下：

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

其中后面的limit是指超过此大小的图片，才进行打包处理，不超过此大小的，url-loader会自动将其转化成Base64格式进行保存。

当然，这里我们还能看到还有一个属性exclude，此属性是为了排除此路径下文件的打包，这里通常是package.json里已经写好版本的外部引用。

---

---

1. 官网有详细的插件列表，http://webpack.github.io/docs/list-of-plugins.html。 ↩