先全局安装

npm i webpack webpack-cli -g

npm i webpack webpack-cli -D

打包命令 开发模式 和 生成模式

webpack ./src/index.js -o ./build/built.js --mode=development
webpack ./src/index.js -o ./build/built.js --mode=production

打包样式资源

const {resolve} = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module:{
        rules:[
            //loader配置
            {
                test:/\.css$/,
                // 使用那些loader进行处理
                use:[
                    // 创建style标签将js中的css样式资源插入进行,添加到head页面生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载到js中
                    'css-loader'
                ]
            }
        ]
    },
// plugins的配置
    plugins:[

    ],
    mode:'development',
    // mode:'production',

}

安装loader

npm i css-loader style-loader -D

打包html资源

打包图片资源

{
                test: /\.(jpg|png|gif)$/,
                // 使用那些loader进行处理
                // 下载url-loader file-loader
                loader:'url-loader',
                options:{
                    // 图片小于8k就会base64处理
                    // 有点:减少请求数量
                    // 缺点:图片体积会增大
                    limit:8*1024,
                    // 问题:使用url-loader默认使用es6模块解析,而html-loader引入图片使用commonjs解析会报错[object Module]
                    // 解决办法 关闭url-loader的es6模块化,使用commonjs解析
                    esModule:false,
                    // 取图片的hash的前10位  [ext]取源文件的扩展名
                    name:"[hash:10].[ext]"
                }
            },
            {
                test:/\.html$/,
                // 处理html文件中的img图片(负责引入img,从而能被url-loader进行处理)
                loader:'html-loader'
            }

打包其他类型的资源

打包其他资源(除了html/js/css)资源以外的资源

            {
                exclude:/\.(css|js|html)$/,
                loader:'file-loader',
                // 输出目录
                outputPath:'other'
            }

devServer

开发服务器 devServer:用来自动化(自动编译,自动打开浏览器,自动刷新浏览器)
特点只会在内存中编译打包
启动devServer指令为:npx webpack-dev-server

    devServer: {
        contentBase: resolve(__dirname, 'build'),
        // 启动gzip压缩
        compress: true,
        port: 3000,
        // 自动打开浏览器
        open:true
    }

开发环境配置