Webpack - 配置文件

1. webpack安装

（1）初始化
运行如下代码

npm init

（2）安装
全局安装运行如下代码

npm i webpack webpack-cli -g

局部安装运行如下代码

npm i webpack webpack-cli -D

2. webpack打包配置文件

2.1 打包样式资源

/* 
    webpack.config.js  webpak 的配置文件
        作用：指示 webpack 干哪些活（当你运行 webpack 指令时，回家再里面的配置）

    所有构建工具都是基于nodejs平台运行的 模块化采用commonjs
*/

// resolve 用来拼接绝对路径的方法
const { resolve } = require('path')
module.exports = {
    // webpack配置
    // 入口起点
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'built.js',
        // 输出路径
        // _dirname nodejs 的变量，代表当前文件的目录绝对路径
        path: resolve(__dirname, 'build')

    },
    // loader 的配置
    module: {
        rules: [
            // 详细 loader 的配置
            // 不同文件必须配置不同loader处理
            {
                // 配置哪些文件
                test: /\.css$/,
                // 使用哪些 loader 进行处理
                use: [
                    // 需要npm i style-loader css-loader -D 安装
                    // 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' // 需要 npm i less less-loader -D 安装
                ]
            }
        ]
    },
    // plugins 的配置
    plugins: [
        // 详细 plugins 的配置
    ],
    // 模式
    mode: 'development', // 开发模式
    // mpde:'production' // 生产模式
}

2.2 打包html资源

/* 
    loader:  1. 下载  2. 使用
    plugins: 1. 下载  2. 引用  3. 使用  
        npm i html-webpack-plugin -D
*/
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            //loader的配置
        ]
    },
    plugins: [
        //plugins的配置
        // html-webpack-plugin    下载： npm i html-webpack-plugin -D
        // 功能： 默认会创建一个空的HTML，自动引入打包输出的所有资源（js/css）
        // 需要有结构的HTML文件
        new HtmlWebpackPlugin({
            // 复制'./src/index.html'文件，并自动引入打包输出的所有资源（js/css）
            template:'./src/index.html'
        })
    ],
    mode: 'development'
}

2.3 打包图片资源

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/index',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                // 要使用多个 loader 处理用 use
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            
            /* 
                新版本webpack默认可以打包图片
                不需要下面配置
            */
            // {
            //     // 问题：默认处理不了 html 中的 img 图片
            //     // 处理图片资源
            //     test: /\.(jpg|png|gif)$/,

            //     /* 
            //         注意: webpack5.0 以上不用配置loader,默认就可以处理图片资源
            //         像url-loader，file-loder都是废弃不会直接使用的
            //         如果想要使用这些废弃的旧功能，加上type: 'javascript/auto'
            //     */
            //     type: 'javascript/auto',

            //     // 使用一个loader
            //     // 下载 url-loader file-loader
            //     loader: 'url-loader',
            //     options: {
            //         /* 
            //             图片大小小于8kb，就会被base64处理
            //             优点：减少请求数量（减轻服务器压力）
            //             缺点：图片体积会更大（文件请求速度更慢）
            //         */
            //         limit: 40 * 1024,
            //         /* 
            //             问题：因为 uri-loader 默认使用 ES6 模块解析，而 html-loader 引入图片是 commonjs
            //             解析时会出现问题：[object Module]
            //             解决：关闭 uri-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'
        })
    ],
    mode: 'development'
}

2.4 打包其他资源

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }

            /* 
                下面这种方式打包错误，删除后图标正常显示
                可能跟webpack版本有关
                新版本可能不需要考虑其他资源打包
            */
            /* ,{
                // 打包其他资源（除了html/js/css/less资源以外的资源）
                exclude: /\.(css|js|html|less)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]'
                }
            } */
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development'
}

2.5 DevServer自动部署

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }

            /* 
                下面这种方式打包错误，删除后图标正常显示
                可能跟webpack版本有关
                新版本可能不需要考虑其他资源打包
            */
            /* ,{
                // 打包其他资源（除了html/js/css/less资源以外的资源）
                exclude: /\.(css|js|html|less)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]'
                }
            } */
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development',

    /* 
        开发服务器 devServer ：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
        特点：只会在内存中编译打包，不会有任何输出
        启动 devServer 指令为：npx webpack-dev-server
    */
    devServer: {// npm i webpack-dev-server -D
        /* 
            项目构建后路径
            新版本 webpack 可能已经抛弃 contentBase ，加上 contentBase 打包会出错
        */
        // contentBase: resolve(__dirname, 'build'),

        // 自动打开默认浏览器
        open: true,
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 8888
    }
}