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编译从哪里开始，有三种配置方式，一、字符串：直接以当前配置文件webpack.config.js为起始位置，输入相应的入口js；二、数组：若是存在多个入口的话，即多个入口js，则以数组形式表示；三、对象：前面无论是字符串方式仍是数组方式，输出的都是一个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