webpack开发环境基本配置--总结篇

前面已经将html，css，图片，其他资源打散讲，这篇是将前面打散的知识点归纳成一篇。直接敲代码吧~~
webpack开发环境基本配置代码如下：

/*

开发环境配置
创建webpack配置工具
npm init ->输入名称 ->一直回车
npm i webpack webpack-cli -g
npm i webpack webpack-cli -D


*/
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 入口起点文件
    entry:'./src/js/index.js',
    // 输出文件
    output:{
        // 文件名称
        filename:'js/built.js',   //打包之后将built.js文件放到js文件下
        // 文件绝对路径
        path:resolve(__dirname,'build')
    },
    // loader配置
    module:{
        rules:[
            // 打包css资源
            // 安装style-loader css-loader
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            // 打包less资源
            {
                // 安装 less less-loader
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            // 打包其他资源(除了html/css/less/js/jpg/png/gif资源外)
            // 安装file-loader
            {
                // 踩坑:如果不加html,html不会被打包.再页面中无法显示.即显示类似于xxxxxxx.html
                exclude:/\.(html|css|less|js|jpg|png|gif)$/,
                loader:'file-loader',
                // 将打包后的文件名称控制在10位
                options:{
                    name:'[hash:10].[ext]',
                    outputPath:'media' //打包之后将放在media文件目录下
                }
            },
            // 打包图片资源
            // 安装 url-loader
            {
                // 这里是处理样式中引入的图片，例如:background-image:url()
                test:/\.(jpg|png|gif)$/,
                loader:'url-loader',
                options:{
                    // 表示如果图片大小小于8kb，按base64处理 
                    limit: 8 * 1024,
                    name:'[hash:10].[ext]',
                    // 这个是关闭es6模块化解析，原因是处理样式中引入的图片是按es6模块解析的，而html中引入的图片是按commonjs解析，
                    // 为了使这个两个处理图片的方式相同,所以关闭掉es6模块化
                    esModule:false,
                    outputPath:'image'  //打包之后将放在iamge文件目录下
                }
            },
            {
                // 安装 html-loader
                // 这里处理的是html中引入的图片，例如标签<img src=""><img>
                test:/\.html$/,
                loader:'html-loader'
            }

        ]
    },
    // 打包Html资源
    // 将'./src/index.html'复制到打包后文件
    // 安装 html-webpack-plugin
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    // 模式,模式分为两种:1.开发模式'development' 2.生产模式'production'
    mode:'development',
   // 开发服务器 devServer:用来自动化(自动编译,自动打开浏览器，自动刷新浏览器~)
    // 特点:只会再内存中编译打包,不会任何输出
    // 启动devServer指令为：npx webpack-dev-server
    // 安装 webpack-dev-server
    devServer:{
        // 运行打包后项目文件路径
        contentBase:resolve(__dirname,'build'),
         // 启动gzip压缩
        compress:true,
        // 端口号
        port:3000,
        // 自动打开浏览器
        open:true
    }

}

具体打包之后文件目录如下：

会发现，之前打散讲的打包资源特别乱，完全没有划分js，css，图片该放在哪个文件里，这完全会影响我们的开发效率，所以在这里我加上outputPath:‘文件名称’, outputPath表示将打包之后文件指定到一个文件里面，从而能够快速的找到想要的文件
还有一个小问题，就是发现buiid文件下怎么少了一个css样式呢？那是因为在打包的过程中会将css一起打包js文件里，所以下篇文章将会讲怎么将css文件从js文件里提取出来