开发模式介绍

在开发模式下，我们主要做两件事

1. 编译代码，使浏览器能够解析

2. 代码质量检查，树立代码规范

处理CSS资源

在我们的资源中如果存在css资源，webpack就需要引入相应loader对其处理，在控制台窗口下，输入npm install css-loader style-loader --save下载必要的两个loader。

在webpack.config.js中，在module属性下写入如下代码

module: {
    //loader配置
    rules: [
      {
        //匹配以.css结尾的文件
        test: /\.css$/,
        //加载loader配置时，会从下到上，从右到左进行加载
        use: [
          "style-loader", //动态创建一个style标签添加到html中，将js中的css加载到标签内
          "css-loader", //将css资源编译成commonjs的模块到js中
        ],
      },
    ],
  },

        控制台再次输入npx webpack，即可成功编译。在后续的视频教程中，使用less,sass等也是一样的方法配置在rules中。后面有一节讲处理图片资源，实际上webpack5可以处理图片资源因为其内置了file-loader与url-loader，如果想要再优化一点，就是把一些文件大小较小的图片转换成base64直接作为本地图片，这样就不用从服务器上请求了。

修改输出目录

        如果是要改主输出文件的路径，可以在webpack.config.js中这样修改：

//输出
  output: {
    //输出路径要求绝对路径
    //__dirname表示当前文件夹目录
    path: path.resolve(__dirname, "dist"),
    filename: "/static/js/main.js",
  },

        如果是要改其他资源的输出文件路径，比如说，修改图片文件的路径为/static/images/下，那么可以这么做：

rules: [
      ...
      {
        test:/\.jpeg/,
        generator:{
          //name表示源文件的文件名，ext表示文件扩展名
          filename:"static/images/[name][ext]"
        }
      }
    ],

自动清空上次打包内容

        在output配置项中加入一项：clean:true

处理字体图标和其他资源

         与打包图片资源类似，其配置如下

rules: [
      ...
      {
        test:/\.(ttf|woff2?|wav|mp3|mp4)$/,
        //asset的话会把较小资源转换base64，加resource的话则是原封不动输出
        type:"asset/resource"
        generator:{
          //name表示源文件的文件名，ext表示文件扩展名
          filename:"static/media/[name][ext]"
        }
      }
    ],

ESLint介绍

        eslint是可组装的javascript和jsx代码检查工具。它是用来检查js和jsx语法的工具。

配置文件

        配置文件有很多种写法，主要分两种：

        1. .eslintrc.*。新建文件，放置在项目根目录下。你可以用不同的描述语言去写配置，如.eslintrc，.eslintrc.js，.eslintrc.json

        2. 在package.json中添加eslintConfig配置项，这样就不用创建新文件了

具体配置

        这里我们以.eslingrc.js为例进行具体配置

module.exports = {
    //解析选项
    parserOptions:{
        ecmaVersion:6,   //es语法版本
        sourceType:"module", //es模块化
        ecmaFeatures:{
            jsx:false   //如果是react项目这里要写true
        }
    },
    //具体检查规则
    //注意，自己配的规则和继承来的规则，如果存在同一规则，自己配的会覆盖掉继承规则
    rules:{
        semi:"warn",     //使用分号的话会警告
        'array-callback-return':"warn", //强制数组方法的回调函数中有return
        //...
    },
    //继承其他规则(开发中自己一点点写规则是很费劲的，因此可以直接继承别人已经写好的规则来用，
    //注意，如果是第三方规则需要自行下载，如果是官方规则则不需要下载，)
    extends:[
        "plugin:vue/essential"
    ]
    //其他规则详见：eslint.bootcss.com/docs/user-guide/configuring
}

 rules具体规则：

• "off"或0  关闭规则
• "warn"或1  开启规则，使用警告级别的错误，不会导致程序退出
• "error"或2  开启规则，使用错误级别的错误，会导致程序退出

写完eslintrc.js后代码检查不会立即生效，需要在webpack配置中进行配置

在webpack中配置eslint

        在webpack4中eslint作为一个Loader使用，但在webpack5中eslint作为一个plugin使用。

       在webpack官方文档中找到eslint相关内容，此小节可略过

        先安装两个插件：eslint和eslint-webpack-plugin

        在webpack.config.js中修改plugins配置项：

 plugins: [new ESLintPlugin({
    context:path.resolve(__dirname,"src")    //哪些文件要做检查
  })],

        在项目根目录下创建.eslintrc.js文件，写入eslint规则。