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

最新推荐文章于 2024-09-16 18:00:00 发布

大神乔伊

最新推荐文章于 2024-09-16 18:00:00 发布

阅读量161

点赞数 1

分类专栏： webpack 文章标签： webpack css react.js

本文链接：https://blog.csdn.net/weixin_44828005/article/details/121054484

版权

本文详细介绍了如何配置webpack开发服务器，以及如何打包html、css、images和静态资源。在css配置中，涉及了基本样式、less/sass处理、css文件抽离、浏览器兼容性和压缩。对于图片和静态资源，讲解了url-loader、file-loader、html-loader的使用，以及webpack 4.x和5.x的不同处理方式。最后，还提及了字体图标资源的打包方法。

摘要由CSDN通过智能技术生成

本文内容如下

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: