Webpack配置

大纲

1.webpack的基本使用(打包js)
2.拆分配置(将配置文件拆分为三个:基本配置,生产配置,开发配置,省去打包前手动修改模式配置(生产或开发));合并配置(将生产,或开发配置与基本配置合并,使用webpack-merge插件实现)
3.学习webpack-dev-serve的使用(配置接口路径,代码改动页面自动更新)
4.Webpack打包css(webpack默认只能打包js)
5.Webpack处理图片
6.多入口(输出多个html文件)

1.webpack最基本使用

1.webpack.config.js

const path =require('path')

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

module.exports = {
    mode:'development',//模式,不写默认为开发模式(未压缩,未删空格,注释),'production'(生产模式)
    entry:{    //打包入口
        main:'./src/index.js'
    },
    output:{//打包输出
        filename:'[name].js'//打包输出文件名,[name] === main(入口文件)
        path:path.resolve(_dirname,'dist')//打包输出路径
    },
    plufins:[//插件
        new HtmlWebpackPlugin({
            template:'./src/index.html'
    })
    ]
}

2.package.json

//配置打包命令
{
    "scripts":{
        "build":"webpack"
    }
}

3.执行打包
npm run build

2.拆分,合并配置

1.src同级目录创建build文件夹

2.新建webpack.base.config.js文件 //基本配置

新建webpack.dev.config.js文件 //开发配置

新建webpack.prod.config.js文件 //生产配置

3.webpack.base.config.js

const path =require('path')

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

module.exports = {
    entry:{    
        main:'./src/index.js'
    },
    output:{
        filename:'[name].js'
        path:path.resolve(_dirname,'dist')
    },
    plufins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
    })
    ]
}

4.webpack.dev.config.js

const commonConfig =require('./webpack.base.consfig.js');//引入基本配置

const {smart:merge} =require('webpack-merge')//引入webpack-merge模块的smart方法(用于合并)

const devConfig = {//开发模式配置
    mode:;'development'
}

module.exports =merge(commonConfig,devConfig)//合并基本配置和开发配置

5.webpack.prod.config.js

const commonConfig =require('./webpack.base.consfig.js');//引入基本配置

const {smart:merge} =require('webpack-merge')//引入webpack-merge的smart方法(用于合并)

const prodConfig = {//生产模式配置
    mode:;'production'
}

module.exports =merge(commonConfig,prodConfig)//合并基本配置和生产配置

6.package.json

//配置打包命令
{
    "scripts":{
        "build:dev":"webpack --config ./build/webpack.dev.config.js",
        "build":"webpack --config ./build/webpack.prod.config.js",
    }

}

3.webpack-dev-serve的使用

1.实现代码改动页面自动更新

1.1.webpack.dev.config.js

const devConfig = {//开发模式配置
    mode:;'development',
    devServer:{
        port:8080,//服务器启动端口8080
        contentBase:'./dist',//服务器静态资源文件夹
        progress:true,//打包时显示进度条
        open:true,//启动服务器后,自动打开浏览器
        compress:true//开启gzip压缩
    }
}

1.2.package.json

//配置打包命令
{
    "scripts":{
        "dev":"webpack-dev-server --config ./build/webpack.dev.config.js"
    }

}

2.接口地址代理转发(接口相对路径补全)

axios.get('/api/project/userinfo').then(res=>{})

1.webpack.dev.config.js

const devConfig = {//开发模式配置
    mode:;'development',
    devServer:{
        port:8080,//服务器启动端口8080
        contentBase:'./dist',//服务器静态资源文件夹
        progress:true,//打包时显示进度条
        open:true,//启动服务器后,自动打开浏览器
        compress:true//开启gzip压缩
    },
    proxy:{    //代理
        '/api/project':{    //发送到'/api/project'的请求转发到'http://baidu.com'
            target:'http://baidu.com',
            changeOrigin:true,
            pathRewrite:{    //路径重写,假设你请求的路径统一写了/api开头,但但后台接口没有,则过滤掉
                '^/api':''
            }
            
        }
    }
}

4.Webpack打包css(loader执行顺序由下往上)

1.webpack.base.config.js

module.exports = {
    
    module:{
        rules:[
            {
                test:/\.css&$/,                                                //顺序
                loader:[
                    'style-loader',//将样式插入到页面style标签中                 // 2
                    'css-loader'//处理css文件之间的依赖关系, @import样式引入关系      //1
                ]
            }
        ],
        rules:[
        ...
        ]
    },
    
}

2.添加处理css兼容性loader //'postcss-loader'

使用'postcss-loader页面渲染效果
transform:rotate(-45deg)
=>
-webkit-transform:rotate(-45deg)
transform:rotate(-45deg)

1.webpack.base.config.js

module.exports = {
    
    module:{
        rules:[
            {
                test:/\.css&$/,
                loader:[
                    'style-loader',//将样式插入到页面style标签中
                    'css-loader'//处理css文件之间的依赖关系, @import样式引入关系
                    'postcss-loader' //需安装autoprefixer插件
                ]
            }
        ]
    },
    
}

2.创建postcss.config.js文件

module.exports = {
    plugins:[
        require('autoprefixer')
    ]
}

3.package.json

//在"scriptrs"同级添加
"browserslist":
    [
        "> 1%",
        "last 2 versions"
    ]

3.添加预编译loader -略

5.Webpack处理图片

比较小的图片,就转成base64格式,可以减少http请求

比较大的图片,依然想file-loader一样,单独打包到img文件夹中,发请求获取,防止页面首次渲染太慢

import img from './img/1.png';    //webpack默认是处理不了的

1.开发环境下使用file-loader

file-loader会将引入的图片放到dist目录下

//webpack.dev.config.js

module:{
    rules:[
        {
            test:/\.(png|jpg)$/,
            loader:'file-loader'
        }
    ]
}

2.生产环境下使用url-loader进行base64转码

//webpack.prod.config.js

module:{
    rules:[
        {
            test:/\.(png|jpg)$/,
            use:{                        
                loader:'url-loader',
                options:{
                    limit:5*1024, //小于5kb就转码
                    outputPath:'/img/'    //大图打包到dist/img文件夹中
                    
                }
            }
        }
    ]
}

6.多入口

//webpack.base.config.js

entry:{
    index:'./src/index.js',
    other:'./src/other.js'
},
plugins:[
    new HtmlWebpackPlugin({
        template:'./src/index.html',
        filename:'index.html',
        chunks:['index']
    }),
    new HtmlWebpackPlugin({
        template:'./src/other.html',
        filename:'other.html',
        chunks:['other']
    }),
]

7.抽离css

上述打包后的css代码,没有单独打包成一个css文件,而是打包在了main.js中,并通过插入到了页面style标签中的方式引入,现在我要实现打包成一个css文件,link方法引入

//webpack.prod.config.js

const MiniCSSExtractPlugin =require('mini-css-extract-plugin');//用来打包生成css文件

const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetWebpackPlugin= require('optimize-css-asset-webpack-plugin')

plugins:[
    new MiniCSSExtractPlugin({
    filename:'css/main.[contentHash:8].css'    //[contentHash:8]设置缓存
    })
],
优化
optimization:{
    minimizer:[
        //压缩js
        new TerserPlugin(),
        //压缩css
        new OptimizeCssAssetWebpackPlugin()
    ]
},
    module:{
        rules:[
            {
                test:/\.css&$/,
                loader:[
                    MiniCSSExtractPlugin.loader,
                    'css-loader'//处理css文件之间的依赖关系, @import样式引入关系
                    'postcss-loader' //需安装autoprefixer插件
                ]
            }
        ]
    },