前端必会的webpack(四）管理图片 + 代码检查 +代码转化

小白追梦

于 2020-10-08 22:12:21 发布

阅读量259

点赞数

分类专栏： webpack 文章标签： js

本文链接：https://blog.csdn.net/weixin_43815680/article/details/108607379

版权

本文详细介绍了如何使用Webpack管理前端项目中的图片，包括安装url-loader和file-loader，配置webpack.common.js，并在JS中引入图片。接着，文章讲解了Eslint的集成，包括安装、配置和在Webpack中使用。最后，文章讨论了Babel的使用，安装所需依赖，创建.babelrc文件并配置，确保Webpack在开发和生产环境中正确转化代码。

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

1-1 管理图片

1、加载 npm install url-loader -D
加载 npm install file-loader -D
2、
webpack.common.js 里面需要配置一下

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const {
    NamedModulesPlugin } = require("webpack");
const {
    CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
   
  entry: {
   
    index: path.resolve(__dirname, "./src/index.js"),
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin({
   
      title: "webpacj init",
    }),
  ],
  module: {
   
    rules: [
      {
   
        // 这个正则表达式的意思是当我们遇到
        // 后面这几种格式的时候 我们使用url-loader
        test: /\.(png|svg|jpg|gif)$/,
        use: {
   
          loader: "url-loader",
          options: {
   
            // 图片大小超过1000 会被打包为图片
            // 没有的话打包为base64 格式的代码
            limit: 1000,
            // 打包后的文件名 [hash]占位符 ext 扩展后缀 如png
            name: "img/[hash].[ext]",
          },
        },
      },
    ],