图片的加载(url-loader)
- 1、下载依赖包:
yarn add url-loader file-loader -D
yarn add url-loader file-loader -D
- 2、配置loader
module: { rules: [ // (1)配置css文件解析 { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } }, 'css-loader' ] }, // (2)配置less文件解析 { test: /\.less$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } }, 'css-loader', 'less-loader' ] }, // (3)配置图片解析 { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { name: '[name].[ext]', publicPath: '../image/', outputPath: 'images/', limit: 8 * 1024, } } ] }, ] }
- 3、
yarn build
打包,图片放到js文件下