webpack使用配置,持续更新...

·  阅读 58

webpack.config.js文件:

/*
 * @Author: Liudan
 * @Date: 2021-08-24 17:26:04
 * @Descripttion:
 * @LastEditors: liudan
 * @LastEditTime: 2021-09-17 15:56:06
 */

// webpack优点:当同一张图片被多次引用,他只会打包一次该图片,不会打包多次该文件
//npx webpack-dev-server 只会在内存中编译打包,没有输出
//webpcak 会将打包结果输出出去

//用来拼接绝对路径的方法
const { resolve } = require('path')
//插件 需要先下载  再注册使用
const HtmlWebpackPlugin = require('html-webpack-plugin') //是一个构造函数,所以要new可以用
const webpack = require('webpack')

module.exports = {
    entry: './src/index.js', //入口文件
    output: {
        //只决定了入口文件的输出路径
        filename: 'js/built.js', //如口文件的输出文件名称 包括css文件都会打包到该路径下
        path: resolve(__dirname, 'build') //输出文件名称及路径  __dirname 是nodejs的变量,代表当前文件的绝对路径+/第二个参数
    },
    //lodar的配置
    module: {
        rules: [
            //详细的loader配置
            {
                //处理css资源
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                //处理less资源
                test: /\.less$/, //以.lss结尾的文件
                //使用哪些loader进行处理 (多个loader处理)
                use: [
                    //执行顺序:从下到上 ,从右到左
                    //创建style标签,将js中的样式资源插入进去,添加到head中生效
                    'style-loader',
                    //将css文件变成CommonJS模块加载到js中,里面的内容是样式字符串
                    'css-loader',
                    //将less文件解析成css文件
                    'less-loader'
                ]
            },
            {
                //处理图片资源

                //问题:默认处理不了html中直接通过img标签引入的图片
                //需要下载url-loader  和file-loader  因为 url-loader是依赖于file-loader的
                //官方文档中显示url-loader等是旧的assets loader,会导致资源重复,需要加上type:'javascript/auto' 设置assets类型解决
                //webpack5使用4个资源模型代替所有处理资源loader
                test: /\.(jpg|png|gif)$/,
                //只使用一个loader处理
                loader: 'url-loader', //在file-loader的基础上做了优化
                options: {
                    //loader中的配置
                    limit: 8 * 1024, //图片小于8kb,就会被base64处理 优点:从而减少请求数量(减轻服务器的压力)缺点:图片体积会更大(文件请求速度更慢)
                    esModule: false, //关闭es6module 使用commonjs
                    name: '[hash:10].[ext]', //给打包完后的图片名称做限制,[hash:10]取图片的前10位hash值,[ext]取文件的原来的扩展名(.png .jpg .gif)
                    outputPath: 'img' //将图片文件输出到build/img目录下
                }
            },
            //问题,因为url-loader默认使用es6模块化解析,而html-loader引入图片是CommonJS,所以解析时就会报错img中src会变成[object Module]
            //解决:关闭url-loader的es6模块化,使用CommonJS解析:esModule:false
            {
                //处理html文件中的img资源
                test: /\.html$/,
                //处理.html文件中的img图片(负责引入img,从而能被url-loader进行处理)
                loader: 'html-loader'
            },
            {
                //打包其他资源 排除css,js,html以外的资源
                exclude: /\.(css|js|html)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'media' //将图片文件输出到build/media目录下
                }
            }
        ]
    },
    mode: 'development',
    //插件
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    //开发服务器 devserver:用来自动化(自动编译,自动打开浏览器,自动刷新浏览器)
    //特点:只会在内存中编译打包,不会有任何输出
    //启用devserver指令为:npx webpack-dev-server  所以要下载webpack-dev-server  npm i webpack-dev-server
    //当ctrl+s保存后会自动编译,并打开浏览器页面展现最新的代码
    devServer: {
        contentBase: resolve(__dirname, 'build'), //打包路径
        compress: true, //启动gzip压缩
        port: 3000, //指定端口号
        open: true //自动打开本地默认浏览器
    }
}

复制代码
分类:
前端
标签: