webpack基本配置

最新推荐文章于 2023-06-18 15:25:04 发布
最新推荐文章于 2023-06-18 15:25:04 发布
阅读量272 收藏
点赞数
分类专栏： webpack 文章标签： webpack nodejs js hash less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ChristWTF/article/details/104949008
版权

文章目录

一 开发环境基本配置

1. 根目录创建webpack.config.js

2. 安装webpack webpack-cli webpack-dev-server

npm i webpack webpack-cli webpack-dev-server -D

3. 打包样式资源

1. 安装css-loader style-loader less less-loader

npm i css-loader style-loader less less-loader -D

2. 配置

const {resolve} = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
/*
* webpack是在nodejs环境下运行的，nodejs默认用commonJS规范
* css-loader 将css文件变成commonJS模块加载到js中，内容为样式字符串
* style-loader 创建style标签，将js中样式资源添加到head中生效
*/
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
    ]
  }，
  //开发环境配置
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
}

4. 打包html资源

1. 安装html-webpack-plugin

npm i html-webpack-plugin -D

2. 配置

const {resolve} = require('path')
const htmlPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
    ]
  },
  plugins: [
/*
* html-webpack-plugin会自动创建一个没有结构的html，并自动引入打包输出的所有资源(JS/CSS等)
* 所以需要为他传入一个有结构的html模板
*/
      new htmlPlugin({
        template: "./src/index.html"
      })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
}

5. 打包图片资源

1. 安装url-loader html-loader

npm i url-loader file-loader

2. 配置

const {resolve} = require('path')
const htmlPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
/*
* 不会解析template模板中的图片
* 图片大小小于8kb的会被base64处理
* 优点：减少请求数量（减轻服务器压力）
* 缺点：图片体积会增大（文件请求速度变慢）但是只增大一点，没事
* 处理不了html中的图片
* */
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
/*
* url-loader默认使用es6模块化解析，而html-loader引入图片是commonJS
* 解决：关闭url-loader的es6模块化，使用commonJS解析
* */
          esModule: false,
          outputPath: 'imgs'
        }
      },
//解析模板中的图片
      {
        test: /\.html$/,
        loader: 'html-loader'
      }
    ]
  },
  plugins: [
/*
* html-webpack-plugin会自动创建一个没有结构的html，并自动引入打包输出的所有资源(JS/CSS等)
* 所以需要为他传入一个有结构的html模板
* */
      new htmlPlugin({
        template: "./src/index.html"
      })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
}

6. 打包其他资源（字体tiff svg等）

const {resolve} = require('path')
const htmlPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          esModule: false,
          outputPath: 'imgs'
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        exclude: /\.(html|js|css|less|png|jpg|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
      new htmlPlugin({
        template: "./src/index.html"
      })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
}

二 生产环境基本配置

1. 将CSS打包成独立文件

1. 安装mini-css-extract-plugin

npm i mini-css-extract-plugin -D

2. 配置

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.css$/,
//用cssPlugin代替 style-loader
        use: [cssPlugin.loader,
          'css-loader']
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          esModule: false,
          outputPath: 'imgs'
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        exclude: /\.(html|js|css|less|png|jpg|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
      new htmlPlugin({
        template: "./src/index.html"
      }),
//创建一个实例
      new cssPlugin({
        filename: 'css/build.css'
      })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
}

2. CSS兼容处理

1. 安装postcss-loader postcss-preset-env

2. webpack.config.js
const {resolve} = require('path')
const htmlPlugin = require('html-webpack-plugin')
const cssPlugin = require('mini-css-extract-plugin')

//设置nodejs环境变量
process.env.NODE_ENV = 'development'

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.css$/,
        use: [cssPlugin.loader,
          'css-loader',
          {
/*
* postcss用于css兼容性处理
* postcss-preset-env用于帮postcss找到package.json中browerslist里面的配置
*/
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                  require('postcss-preset-env')()
              ]
            }
          }
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          esModule: false,
          outputPath: 'imgs'
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        exclude: /\.(html|js|css|less|png|jpg|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
      new htmlPlugin({
        template: "./src/index.html"
      }),
      new cssPlugin({
        filename: 'css/build.css'
      })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
}
3. 配置package.json
//加入
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

3. 压缩CSS

1. 安装optimize-css-assets-webpack-plugin

 npm i optimize-css-assets-webpack-plugin -D

2. 配置

const {resolve} = require('path')
const htmlPlugin = require('html-webpack-plugin')
const cssPlugin = require('mini-css-extract-plugin')
const cssCompress = require('optimize-css-assets-webpack-plugin')

//设置nodejs环境变量
process.env.NODE_ENV = 'development'

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.css$/,
        use: [cssPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                  require('postcss-preset-env')()
              ]
            }
          }
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          esModule: false,
          outputPath: 'imgs'
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        exclude: /\.(html|js|css|less|png|jpg|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
      new htmlPlugin({
        template: "./src/index.html"
      }),
      new cssPlugin({
        filename: 'css/build.css'
      }),
      new cssCompress()
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
}

4. eslint语法检查

1. 安装eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import

npm i eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import -D

2. webpack.config.js配置

const {resolve} = require('path')
const htmlPlugin = require('html-webpack-plugin')
const cssPlugin = require('mini-css-extract-plugin')
const cssCompress = require('optimize-css-assets-webpack-plugin')

//设置nodejs环境变量
process.env.NODE_ENV = 'development'

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.css$/,
        use: [cssPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                  require('postcss-preset-env')()
              ]
            }
          }
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          esModule: false,
          outputPath: 'imgs'
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        exclude: /\.(html|js|css|less|png|jpg|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      },
//eslint 语法检测
      {
        test: /\.js$/,
        exclude: /node_modules/,	//下载的库不检测
        loader: 'eslint-loader',
        options: {
          fix: true	//自动修复
        }
      }
    ]
  },
  plugins: [
      new htmlPlugin({
        template: "./src/index.html"
      }),
      new cssPlugin({
        filename: 'css/build.css'
      }),
      new cssCompress()
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
}

3. package.json配置

 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  //加入exlintConfig
  "eslintConfig": {
    "extends": "airbnb-base"
  }

5. JS兼容性处理

1. 安装babel-loader @babel/core @babel/preset-env core-js

$ npm i babel-loader @babel/core @babel/preset-env core-js -D

2. webpack.config.js配置

const {resolve} = require('path')
const htmlPlugin = require('html-webpack-plugin')
const cssPlugin = require('mini-css-extract-plugin')
const cssCompress = require('optimize-css-assets-webpack-plugin')

//设置nodejs环境变量
process.env.NODE_ENV = 'development'

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.css$/,
        use: [cssPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                  require('postcss-preset-env')()
              ]
            }
          }
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          esModule: false,
          outputPath: 'imgs'
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        exclude: /\.(html|js|css|less|png|jpg|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
//添加JS兼容
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',
                corejs: {
                  version: 3
                },
                targets: {
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge: '17'
                }
              }
            ]
          ]
        }
      }
    ]
  },
plugins: [
      new htmlPlugin({
        template: "./src/index.html"
      }),
      new cssPlugin({
        filename: 'css/build.css'
      }),
      new cssCompress()
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
}

6. html和js压缩

const {resolve} = require('path')
const htmlPlugin = require('html-webpack-plugin')
const cssPlugin = require('mini-css-extract-plugin')
const cssCompress = require('optimize-css-assets-webpack-plugin')

//设置nodejs环境变量
process.env.NODE_ENV = 'development'

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.css$/,
        use: [cssPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                  require('postcss-preset-env')()
              ]
            }
          }
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          esModule: false,
          outputPath: 'imgs'
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        exclude: /\.(html|js|css|less|png|jpg|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
//优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',
                corejs: {
                  version: 3
                },
                targets: {
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge: '17'
                }
              }
            ]
          ]
        }
      }
    ]
  },
plugins: [
      new htmlPlugin({
        template: "./src/index.html",
//html压缩
        minify: {
          collapseWhitespace: true, //移除空格
          removeComments: true      //移除注释
        }
      }),
      new cssPlugin({
        filename: 'css/build.css'
      }),
      new cssCompress()
  ],
//生产环境下自动压缩js代码
  mode: 'production',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
}
超人不会飞/
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
引入tiff.js报错
Girasoles的博客
04-24 1355
引入tiff.js报错
vue中使用tiff.js展示tif格式的图片
fiona118_的博客
03-29 2932
tiff.js
webpack.base.conf.js文件的配置
qq_42770988的博客
07-07 2209
一、引入模块文件 const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig = require('./vue-loader.conf') const utils = require(’./utils’) 对vue-loader对于css预编译一些提取的工具模块，因为对于个人开发而言，在里面提供了，sass,less,styl
webpack处理js兼容性问题之core-js
jieyucx的博客
06-18 4927
core-js是一个JavaScript库，提供了许多ES5、ES6和其他新特性的polyfills，以确保这些新特性在旧浏览器上的兼容性。polyfill翻译过来叫做垫片/补丁。就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性。它的主要用途是为了确保Web应用程序在所有浏览器中都能运行，并提高代码的可移植性和可维护性。举个例子，ES6引入了一个新的数据结构Map，但是在某些旧版本的浏览器中可能不支持Map。在这种情况下，使用core-js库的可以确保Map。
webpack的安装与配置使用 最全最详细的小白教学
llq007007的博客
02-13 2994
less-loader css-loader sass-loader postcss-loader babel-loader file-loader url-loader eslint-loadereslint-loadereslint-loader html-webpack-plugin mini-css-extract-plugin css-minimizer-webpack-plugin eslint-webpack-plugin copy-webpack-plugin
webpack基本配置案例
08-10
在这个"webpack基本配置案例"中，我们将深入理解Webpack的核心概念和基础配置。 首先，Webpack 的核心思想是"一切都是模块"，它通过加载器（Loader）将不同类型的文件转换为JavaScript模块，然后通过插件（Plugin）...
webpack_starter:WEBPACK基本配置文件
05-18
在 `webpack_starter` 中，我们将探讨 Webpack 的基本配置，了解如何安装和启动项目。 首先，让我们从安装开始。Webpack 需要通过 Node.js 的包管理器 `npm` 来安装。在命令行中，进入你的项目目录，然后运行以下...
webpack的配置和插件的使用介绍代码
12-25
通过以上内容，你已经了解了Webpack的基本配置和插件使用，但Webpack的功能远不止于此，还包括Source Map、externals、性能分析等高级特性。继续深入学习，可以更好地驾驭Webpack，优化你的前端项目。
webpack配置配置介绍和操作指引
最新发布
05-27
## 一、Webpack 基本概念 Webpack 是一个静态模块打包器，它会分析你的项目依赖，然后将这些模块打包成静态资源。Webpack 将项目视为一系列可互操作的模块，这些模块可以是 JavaScript 文件，也可以是 CSS、图片、...
详解webpack之图片引入-增强的file-loader：url-loader
12-11
前言： 本文介绍了url-loader（增强的file-loader）； url-loader作用：根据需求选择性的把某些小图片编码成base64格式写进页面；从而减少服务器请求。优化性能。 url-loader解决的问题: 如果图片较多，会发很多http请求，会降低页面性能。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file
webpack-image-rotate-loader：Webpack加载器以旋转导入的图像
02-23
webpack-image-rotate-loader 该加载器旋转图像。 支持JPEG，PNG，WebP，TIFF和RAW图像。 例子 安装 使用npm安装： npm install --save-dev webpack-image-rotate-loader 用纱安装： yarn add --dev webpack-image-rotate-loader 用法 该加载器输出原始的旋转图像文件。 "file-loader"或其他能够处理图像文件的加载器应放置在此加载器之前（因为webpack加载器从最后一个运行到第一个）。 如果您只想旋转一些但不是全部图像，请使用webpack的oneOf （如）。 webpack.config.js module . exports = { ... module : { rules : [ {
webpack的生产模式兼容性处理
小菜鸟的博客
10-07 525
webpack的配置 注意不要有中文路径并且文件扩展名必须显示出来不然会有小问题 初始化 npm init --yes 初始化过后修改package.json,scripts下面添加个配置文件 意思就是使用一个配置文件来编译 “build”:“webpack --config ./webpack.config.js” 安装包 yarn add webpack webpack-cli --dev 在根目录上创建一个文件 webpack.config.js 此文件不可改 webpack配
webpack 处理html中img的src引入的图片
热门推荐
wzs_xyz的专栏
06-23 3万+
webpack在管理模块，处理各种资源上都是无往不利，但唯独在处理html上比较困难，不识别html中img标签src引入的图片。 html-webpack-plugin这种插件辅助处理html非常好，但却仍然未解决html代码中的图片问题，未免美中不足。在遍寻开源模块无果后，认真研究webpack的loader和plugin后，终于解决了这个问题。从npm安装模块npm i html-withi
webpack 思路整理
撞南墙的猪
07-22 122
webpacak解决的问题： 它是一个打包工具，开发的时候你可以模块化开发，它帮你把这些模块打包在一起，帮助解析那些不能识别的文件比如react、vue、typescript的 webpack.config.js的五部分： entry /output/ modules（loader+plugin）/ mode loader用来解决非js问题，webpack只能识别js文件（图片文件、vue、s...
webpack 压缩图片
txl910514的专栏
07-26 4763
安装 image-webpack-loader  然后webapck配置里  { test: /\.(png|jpg|gif)$/i, exclude: /(node_modules|bower_components)/, use:[ { loader: 'url-loader', options: { limit: 10000, n
react+tsx+webpack
pzmyg的博客
01-11 7637
1、创建tsx初始化工程： create-react-app app-demo-ts --scripts-version=react-scripts-ts 2、编写组件类Hello，渲染至页面 3、npm build、npm start,运行正常 4、安装webpack npm install -g webpack 5、安装ts与webpack整合依赖 npm install --save-dev...
webpack使用mini-css-extract-plugin过程中踩的一些坑
qq_37431622的博客
08-16 5496
在使用webpack的mini-css-extract-plugin插件时，打包css后样式表里引用文件的路径都有问题，按照网上的教程，大部分都是说修改publicPath 就结论来说，确实只需要将publicPath改为: "../"即可 但是，需要注意的是，当file-loader或者url-loader配置了publicPath时，mini-css-extract-plugin.loader中的publicPath将不再生效 所以最终应该这样配置 { test: /\.less$/,
webpack加载image
hline123的博客
09-30 750
webpack加载image
webpack配置和基本使用
07-12
Webpack是一个现代化的前端构建工具，它可以帮助开发者将多个模块打包成一个或多个最终的静态资源文件。...以上是Webpack的基本配置和使用方法，你可以根据自己的需求进行更详细的配置和使用。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值