Webpack基础配置

单页面配置

描述:如果配置中只存在一个项目，此时唯有单页面配置能快速满足需求。

1. 针对开发环境的配置
2. 一个入口一个出口，这就是webpack单页面配置

const path= require('path')
module.exports={
    // webpack配置
    //入口配置
    // entry:入口的绝对路径 
    entry:path.join(__dirname,'../src/main.js'),
    // 出口配置
    output:{
        path:path.join(__dirname,'../build'),
        filename:'app.js'
    },
    // 环境的配置
    mode:'development'

}

多个面配置

描述:如果再配置中存在多个项目(h5,ipad,pc)端项目时，单页面配置已经不再满足需求

1. 针对开发环境的配置
2. 多个入口对应多个出口，这就是webpack页面配置

const path= require('path')
module.exports={
    // webpack配置
    //入口配置
    // entry:入口的绝对路径 
    entry:{
        'h5':path.join(__dirname,'../src/h5/h5.js'),
        'ipad':path.join(__dirname,'../src/ipad/ipad.js'),
        'pc':path.join(__dirname,'../src/pc/pc.js'),
    },
    // 出口配置
    output:{
        path:path.join(__dirname,'../build'),
        filename:'[name].js'
    },
    // 环境的配置
    mode:'development'

}

转换器Loader

css样式转换

安装插件：

1. css-loader
2. style-loader

// css转换器配置
    module:{
        rules:[//里面的每一个{}就是一个转换器的配置
            {
                test:/\.css$/, //全局检索以.css结尾的文件
                use:['style-loader','css-loader']//数组中的插件 执行顺序为下标越大先执行
            }
        ],

配置前端静态服务器

此处只介绍命令终端配置

1. 配置服务器端口以及代理等设置

  // 服务器配置
    devServer:{
        port:8080,
        open:true,
        hot:true,
        proxy:{}
    }

优雅降级配置

高版本语法在浏览器的支持度比较差，所以需要把高版本语法转换成低版本语法

• 先安装转换器需要的包
  • npm install -save-dev babel-loader babel-core babel-preset-env

  // 转换器配置
    module:{
        rules:[//里面的每一个{}就是一个转换器的配置
            {
                test:/\.css$/, //全局检索以.css结尾的文件
                use:['style-loader','css-loader']//数组中的插件 执行顺序为下标越大先执行
            },
                //配置优雅降级 高级版本es6/7转换成es5
            {
                test:/\.js$/,
                exclude:/node_modules/,///排除 node_modules下的js
                use:[{
                    loader:'babel-loader',//用来转换
                    options:{
                        presets:['@babel/preset-env']//用来识别版本
                    }
                }]
            }
        ],
    },

Html导出

• 安装第三方插件

npm i html-webpack-plugin -D

• 首先需要导入这个包 并用一个变量接收

const HtmlWebpackPlugin =require('html-webpack-plugin')

// html插件配置
    plugins:[
        new HtmlWebpackPlugin({
            template:path.join(__dirname,'../public/index.html'),
            filename:'index.html',
            hash:true,//区分版本 ，给打包后的入口文件添加hash值，防止版本冲突
            minify:{
                removeAttributeQuotes:true //压缩去掉引号
            }
        })
    ]

css抽离 -依赖插件

• 安装第三方插件

npm i extract-text-webpack-plugin@next -D

• 首先需要导入这个包 并用一个变量接收

const ExtractTextWebpackPlugin=require('extract-text-webpack-plugin')

//loader配置部分替换
    use:ExtractTextWebpackPlugin.extract({
            use:'css-loader'
        })//css抽离时就不再需要style-loader
    },
//plugins配置部分添加
     new ExtractTextWebpackPlugin('css/[name][hash:6].css')

图片打包

npm install url-loader file-loader --save -dev

 // 图片打包
    {
        // 图片的转换器
        test:/\.(png|jpg|webp|gif)$/,
        use:[
            {
                loader:'url-loader',
                options:{
                    limit:5000,//字节少于5000=4k转换成base64 超过5000就不进行转换
                    output:'img/'//图片转换后输出的文件夹
                },
            }
        ]
    }

静态资源拷贝

npm i copy-webpack-plugin -D

//引入模块
const CopyWebpackPlugin= require('copy-webpack-plugin')
//plugins配置部分添加
new CopyWebpackPlugin([ //将某个文件夹下的所有静态资源拷贝到build下,这个文件夹一般时public或者static
            {
                from:path.join.resolve(__dirname,'public'),
                to:path.resolve(__dirname,'build/public')
            }
        ])

配置文件拆分

"dev": "webpack --config config/webpack-config-dev.js", "serve": "webpack-dev-server --config config/webpack-config-dev.js",

错误资源定制

devtool:'source-map'

配置路径别名/省略文件后缀名

 //路径别名
    resolve:{
        alias:{
            "@":path.join(__dirname,'../src')
        },
        extensions:['.wasm','.mjs','.xml','json','.vue','.js',]
    }