web4.0基本配置

const path = require('path');//引入路径包
const HWP = require('html-webpack-plugin');//引入自动产出html包
const CWP = require('clean-webpack-plugin');//引入清除文件包
const webpack = require('webpack');//引入webpack，做热更新用
//const etwp = require('extract-text-webpack-plugin');
const mcep = require('mini-css-extract-plugin');//引入分离css包
const copywp = require('copy-webpack-plugin');//引入拷贝插件

let obj = {
    /*
    webpack4.0需要配置依赖:
        开发依赖->mode:'development'
        生产依赖->mode:'production'
    */
    mode:'development',//配置开发依赖
    //入口文件
    entry:{
        './index.html'//目的为了解析某些指定文件，最终编译成能在浏览器运行的文件
    },
    //出口文件（取个名字放在build文件夹下面）
    output:{
        path:path.resolve(__dirname,'build'),//指定打包后的文件夹
        filename:'[name].[hash:6].js'//给指定的文件名字加上6位哈希
    },
    //利用loader模块转换器分离css
    module:{
        rules:[
           {
                 /*在根目录下找.css结尾的文件，把他们打包出来 */
                test:/\.css$/,//匹配所有以.css结尾的
                use:[
                    //使用css分离就用mini-css-extract-plugin
                    {
                        loader.mcep
                    },
                    'css-loader'//使用css-loader
                ]
            }，
            //处理css中图片
            {
                test:/\(jpg|png|gif|svg|ttf|eot|woff|bmp)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:4096,//图片大小
                            outputPath:'../images',//指定打包后的图片位置
                            publicPath:'/images'//原来的图片位置
                        }
                    }
                ]
            }

        ]
    }
    //引入扩展插件
    plugins:[
        //清除文件插件
        new CWP({
            ['build']//清除打包后多余的js（必须放在html文件上面）
        }),
         //分离css插件
        new mcep({
            filename:'1.css'
        }),
         //自动产出html插件
        new HWP({
            template:'./index.html'//模板文件,

            //对文件进行压缩
            minify:{
                removeAttributeQuotes:true,//去掉属性双引号
                collapseWhitespace:true//将文件压缩成一行
            },
            /*
                设置文件的title
                用模板引擎配合使用,<%= htmlWebpackPlugin.options.title>
            */
            title:'欢迎来到webpack4.0',
            hash:true,//给产出的文件加上hash，避免缓存
            //提取代码中的公共模块，然后将其打包到独立的文件中
            chunks:['index','index1']

        }),
        //热更新插件
        new webpack.HotModuleReplacementPlugin()//热更新模块
    ],
    //配置开发服务器
    devServer:{
        //配置开发服务运行时文件根目录（该配置可以省略）
        contentBase:path.resolve(__dirname,'build'),
        host:'localhost', //服务器监听的主机地址
        compress:true, //服务器是否启动压缩
        port:80, //服务器监听的端口
        open:true, //自动打开浏览器 可不写
        hot:true//热更新，局部刷新
    }

}
module.exports = obj;//导出obj

*** extract-text-webpack-plugin默认安装的是3.0.2不支持webpack4.0
    所以使用mini-css-extract-plugin 支持webpack4.0