webpack学习：配置开发服务器，css，图片，文件

本文内容如下

webpack中的概念和文件结构

如果你都有了答案，可以忽略本文章，或去webpack学习导图寻找更多答案

配置开发服务器

开发服务器，便于测试代码，仅仅在开发阶段使用，不会在dist目录生成代码，而是虚拟运行

安装开发服务器：yarn add -D webpack-dev-server

添加package.json的运行命令:
"scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
},


devServer: {
    host: 'localhost',
    port: '3000',      //端口号
    open: true,        //启动之后自动打开浏览器
    compress: true,    //启动gzip压缩，减少代码
    hot: true,         //开启热更新，一般只会更新css，需要手动刷新
    proxy: {           //设置服务器代理，解决跨域问题
    
        //一旦devServer(3000)端口接收到以/api开头的请求，
        //转发到另外一个服务器8888宽口
        '/api': {
            target: 'http://localhost:8888',

            //发送请求时, 请求路径重写：去掉/api
            pathRewrite: {
                '^/api': ''
            }
        },
        '/api2': { //第二个
            target: 'http://localhost:8080'
        }
    },
},

配置打包html

在上一篇，已经配置过了，内容包括：自动引入JS，修改title，html代码压缩

在这里，再安装clean-webpack-plugin，用于每次打包时删除旧有的打包文件

//安装：
yarn add html-webpack-plugin clean-webpack-plugin

//引入：
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

//配置：
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
    	new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html',  //指定html模板，以该模板注入打包模块
            title: '代码研习',          //修改html标题，需要配置模板语法<title><%= htmlWebpackPlugin.options.title %></title>
            minify: {                  //html代码压缩
                collapseWhitespace: true,  //移除空格
                removeComments: true       //移除注释
            }
        })
    ]
}

配置打包css

几种配置：

1. 基本css，样式写入html的style标签中
2. 使用less或sass
3. 抽离css到一个单独的文件，使用引用文件的方式加载css
4. 兼容各种浏览器
5. 压缩css

依赖：

根据需要安装

css-loader      //处理css
style-loader    //将css加入到html的style标签中
postcss         //postcss-loader的依赖
postcss-loader  //处理浏览器兼容

less            //less依赖
less-loader     //处理less

mini-css-extract-plugin           //抽离css到一个单独的文件，由html-webpack-plugin引入
css-minimizer-webpack-plugin      //css压缩

基本css，样式写入html的style标签中

use: [ ‘style-loader’, ‘css-loader’] 的执行逻辑是 从右往左，先处理css，再将css写入html的style标签中

yarn add -D css-loader style-loader

module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },

处理less

yarn add -D less less-loader

module: {
        rules: [
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
},

抽离css到一个单独的文件，使用引用文件的方式加载css

所以，已经不需要style-loader了，使用MiniCssExtractPlugin.loader，替代style-loader，并且配置plugin的输出目录

yarn add -D html-webpack-plugin mini-css-extract-plugin

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            title: '代码研习',
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name]-[contenthash:8].css',  //css输出目录
        })
    ]
}

浏览器兼容性处理

loader如果需要配置，可以使用对象的方式

注意： 需要在package.json添加browserslist配置，用于处理浏览器的规则

yarn add -D postcss postcss-loader

module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: { plugins: ['postcss-preset-env'] }
                        }
                    },
                    'less-loader']
            }
        ]
    },


//package.json
"browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [     //生产环境：默认开启生产环境
      ">0.01%",         //兼容大多数浏览器
      "not dead",       //不要死了的浏览器
      "not op_mini all" //不要open浏览器
    ]
},

压缩css

css的代码将以一行的方式呈现，节约文件大小，以便获取更快的加载速度

yarn add -D css-minimizer-webpack-plugin

const CssMinimizer= require('css-minimizer-webpack-plugin')
plugins: [ new CssMinimizer() ]

配置打包images

两个配置：css中的图片，html中的src图片

1. url-loader，file-loader，处理css背景图片，url-loader依赖file-loader
2. html-loader，处理html中img的src图片

webpack 4.x的用法

这种写法，webpack5同样兼容

yarn add -D url-loader file-loader html-loader


module:{
    rules:[
        {
            test:/\.(jpg|png|gif)$/,
            loader:'url-loader',  
            options:{
                //重命名文件名
                //占位符，name是打包前模块的名称，ext是打包前的模块格式
                name:'[name]-[hash:10].[ext]',
                
                //把打包后的图片放到一个目录
                outputPath: 'img', 
                
                //图片小于limit的，转成base64字符串格式：8-12kb以下
                //优点：减少请求数量，减轻服务器压力
                //缺点：图片体积稍微大点
                limit: 8 * 1024, 
                
                //问题：因为url-loader默认使用ES6模块化解析，html-loader使用
                //common.js，所以解析时会显示[object Module]
                //解决：关闭url-loader的es6模块化，使用common解析
                esModule: false
            }
        },
        {
            test:/\.html$/,
            loader: 'html-loader'
        }
    ]
}

webpack 5.x的用法

webpack5使用四种新增的资源模块（Asset Modules）替代url-loader，file-loader，raw-loader

1. asset/resource 将资源分割为单独的文件，并导出url，类似file-loader功能
2. asset/inline 将资源导出为dataURL（url(data:)）的形式，类似url-loader功能
3. asset/source 将资源导出为源码（source code），类似raw-loader功能
4. asset 是 asset/resource 和 asset/inline 的结合，用它就行，类似url-loader的limit功能

{
     test: /\.(jpg|png|gif|jpe?g)$/,
     type: 'asset',
     generator: {
         filename: 'img/[name][hash:4][ext]'  //把打包后的图片放到一个目录
     },
     parser: {
         dataUrlCondition: {                  //转成base64字符串格式：8-12kb以下
             maxSize: 8 * 1024
         }
     },
     {
         test: /\.svg$/,
         type: 'asset/inline'
     },
 },

配置打包静态资源

字体图标

webpack 4.x

yarn add -D file-loader

{
    test: /\.(woff?2|ttf|eot)$/,
    exclude:/\.(css|less|js|html|jpg|gif|png)$/,  //或者排除以下文件
    loader:'file-loader',
    options:{
        name:'font-[hash:10].[ext]'
    }
}

webpack 5.x

{
    test: /\.(woff?2|ttf|eot)$/,
    type: 'asset/resource',
    generator: {
		filename: 'font/[name].[hash:4][ext]'
	}
}

总结：

学习更多

webpack学习导图