关于前端: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 插件
                ]
            }
        ]
    },