打包样式资源

webpack.config.js中module部分

引入：
‘style-loader’**,
‘css-loader’**,
**‘less-loader’**

module:{
        rules:[
            //详细loader配置
            //不同文件必须配置不同loader处理
            {
                //配置那些文件，以css结尾的文件
                test:/\.css$/,
                //使用哪些loader进行处理
                use:[
                    //use数组中loader执行顺序：从右到左，从下到上 依次执行
                    //创建style标签，将js中的央视资源插入进行，添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载js中，里面内容是 样式字符串
                    'css-loader'
                ]
            },
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    //将less文件编译成css文件
                    //需下载less-loader和less
                    'less-loader'
                ]
            }
        ]
    },

打包HTML资源

webpack.config.js中plugins部分

引入插件：
html-webpack-plugin

/** 
 * loader:1.下载   2.使用（配置loader）
 * plugins:1.下载   2.引入  3.使用
*/
plugins:[
        //plugins的配置
        //html-webpack-plugin
        //功能：默认会创建一个空的HTML文件，自动引入打包输出所有资源（JS/CSS）
        //需求：需要有结构的HTML文件
        new HtmlWebpackPlugin({
            //复制'./src/index.html'文件，并自动引入打包输出所有资源（JS/CSS）
            template:'./src/index.html'
        })
    ],

打包图片资源

webpack.config.js中module,plugins部分

引入：
‘style-loader’**,
‘css-loader’,
‘less-loader’,
‘**url-loader’,
‘file-loader**‘,
‘html-loader’,
‘html-webpack-plugin‘,**

module:{
        rules:[
            {
                test:/\.less$/,
                //要使用多个loader处理用user
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {   
                //问题：默认处理不了html中img图片
                //处理图片资源
                test:/\.(jpg|png|gif)$/,
                //使用一个loader
                //下载 url-loader file-loader
                loader:'url-loader',
                options:{
                    //图片大小小于8kb，会被base64处理
                    //优点：减少请求数量（减轻服务器压力）
                    //缺点：图片体积会更大（文件请求速度会更慢）
                    limit:8*1024,
                    //问题：因为url-loader默认使用es6模块解析，而html-loader引入图片是commonjs
                    //解析时会出问题：[object Module]
                    //解决：关闭url-loader的es6模块化，使用commonjs解析
                   //esModule:false
                    //给图片重命名
                    //[hash:10]取图片的hash的前10位
                    //[ext]取文件的原来扩展名
                    name:'[hash:10].[ext]'
                }
            },
            {
                test:/\.html$/,
                //处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
                loader:'html-loader'
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],

打包其他资源

webpack.config.js中module部分

引入：
‘style-loader’**,
‘css-loader’**,
**‘file-loader‘**

 module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            //打包其他资源（除了html/js/css资源以外的资源）
            {
                //排除html/js/css
                exclude:/\.(css|js|html|less)$/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]'
                }
            }
        ]
    },

devServer的使用

        //开发服务器devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
    //特点：只会在内存中编译打包，不会有任何输出
    //启动devServe指令为：npx webpack-dev-server
    devServer:{
        //项目构建后的路径
        contentBase:resolve(__dirname,'build'),
        //启动gzip压缩
        compress:true,
        //端口号
        port:8080,
        //自动打开浏览器
        open:true
    }