webpack常用配置

　　就我个人而言，之前也没有学过webpack，也没有单独用过webpack，只是在使用vue-cli时顺带使用了一下webpack，可事实上，彼时，我甚至可以根本不用关心他究竟是不是webpack，我只需要按照vue-cli一步步的操作下去即可，有时候，也会遇到各种各样的问题，可能为了一个很小的问题能够耽搁好半天。所以，下定决心来了解一下webpack了。

　　其实，关注点也没有那么多，不考虑模板的话，大多数的前端关注的焦点可能都在js、css、image这三部分。

　　直接看一份配置文件

const path = require('path');

// 利用extract-text-webpack-plugin插件，提取为单独的css文件
const ExtractTextPlugin = require('extract-text-webpack-plugin')


module.exports = {
    entry: {
        index: './src/js/app.js'
    },

    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: 'js/[name].js',
        publicPath: path.resolve(__dirname, "./dist")
    },
    module: {
        rules: [{
                test: /.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /.scss/,
                use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: [{
                                loader: "css-loader",
                                options: {
                                    sourceMap: true,
                                    minimize: true,
                                },
                            },
                            {
                                loader: 'sass-loader',
                                options: {
                                    sourceMap: true
                                }
                            }
                        ]
                    })
            },
            {
                test: /.(png|jpg|gif)$/i,
                loader: "url-loader",
                options: {
                    limit: 1024,
                    name: "[name].[ext]",
                    outputPath: '/images/'
                }

            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: "css/[name]-app.css"
        })
    ]
}

　　我们将目光聚焦在module.exports这个对象内部的各属性。

　　entry入口文件，简单来说就是webpack编译从哪里开始，有三种配置方式，1、字符串：直接以当前配置文件webpack.config.js为起始位置，输入相应的入口js；2、数组：如果存在多个入口的话，即多个入口js，则以数组形式表示；3、对象：前面不管是字符串方式还是数组方式，输出的都是一个js文件，而对象的表示方式就是添加模块名称，也就是Chunk Names，可以生成多个输出的js。

　　数组输入：

entry: ['./src/js/app.js', './src/js/index.js']

　　对象输入：

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

　　相对应的输出文件的配置

    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: 'js/[name].js',
        publicPath: path.resolve(__dirname, "./dist")
    },

　　如果需要保存在同一个js文件夹下面，则filename的值需要加上文件夹名称，例如这里的是js，如果需要打包成多个js文件，则需要使用[name]占位，而如果需要打包成同一个js文件，则这里可以写成"js/bundle.js"。

　　关于path，在webpack3版本里面不知道是不是强制要求必须配置绝对路径了，我的配置如果不加绝对路径的话，打包总是报错，提示需要一个absolute path。关于js配置基本上完成了。还有一点需要配置的是，如果采用ES6语法写的JavaScript，我们还需要配置一个babel，这就涉及到各个loader的配置了，需要在module.rules这个数组里面一个一个的loader。

{
    test: /.js$/,
    exclude: /node_modules/,
    loader: "babel-loader",
    options: {
        "presets": ["env"]
    }
}    

　　关于babel配置，将ES6语法转成常规JavaScript的话，需要 "presets": ["env"]，这里有三种配置方法，可参见babel官网，但是推荐当前这种写法，看起来比较整洁。

　　关于css留在最后，先说图片相关的配置

　　通常情况下，有3个loader可以配置图片，file-loader、url-loader、image-webpack-loader，简单说file-loader就是解决图片问题的，url-loader是可以在file-loader的基础上加上限制，小于多少字节的图片可以转化为base64编码，image-webpack-loader相当于在保证图片一定质量的情况下，对图片进行压缩，对于我来说，我常用https://tinypng.com/压缩图片，所以需求上并不是很迫切。

所以多数情况下，我会选择url-loader

{
    test: /.(png|jpg|gif)$/i,
    loader: "url-loader",
    options: {
        limit: 1024,
        name: "[name].[ext]",
        outputPath: '/images/'
    }
}    　　

　　图片格式一般还需要有svg，甚至包括一些图标字体化的ogg、woff等字体图标都是通过url-loader来处理的。

　　limit是确定需要在多少字节以内的图片转为base64，[name]是图片名称的占位符，[ext]是图片格式。outputPath是将图片打包到同一个文件夹下面，如果不想写这个属性，又想达到相同效果的话，还可以将name属性值配置为"/images/[name].[ext]"。

　　如此配置的话，对于简单需求，基本上够用了。

　　关于css-loader，如果再涉及到sass、less、postcss，那就更多了，我个人只会使用sass，所以以sass为例，一般需要配置多个loader，style-loader、css-loader、sass-loader必不可少，sass-loader还需要配合node-sass。

　　如果单纯的只想把css文件打包到js文件中的话

{    
    test: /.scss/,
    use: [
        "style-loader",
        {
            loader: "css-loader",
            options: {
                importLoaders: 1,
                sourceMap: true,
                minimize: true,
            },
        },
        "sass-loader"
    ]
}    

　　多个loader处理css的话，依照从右向左，或者下到上排列处理顺序，先sass-loader，然后css-loader，然后style-loader，importLoaders是指还需要后面几个loader处理该文件，minimize表示是否压缩css， sourcemap，不解释。

　　然而，你如果想将打包的所有css文件抽取出来成为一个独立的css文件，那还需要一个plugin插件“extract-text-webpack-plugin”，

const ExtractTextPlugin = require('extract-text-webpack-plugin')

　　

{
    test: /.scss/,
    use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: [{
            loader: "css-loader",
            options: {
                sourceMap: true,
                minimize: true,
                 },
             },
             {
                 loader: 'sass-loader',
                 options: {
                     sourceMap: true
            　　　　}
        　　}
　　　　]
    })
}

　　与module平级的plugin

plugins: [
    new ExtractTextPlugin({
            filename: "css/[name].css"
        })
    ]

　就会在dist目录下生成css文件夹，以及对应的css