[webpack基础| 青训营笔记]

这是我参与「第五届青训营 」伴学笔记创作活动的第10天 1.Webpack功能介绍 开发模式：仅能编译 JS 中的 ES Module 语法 生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码 2.webpack五大核心概念 entry（入口） 指示 Webpack 从哪个文件开始打包 output（输出） 指示 Webpack 打包完的文件输出到哪里去，如何命名等 loader（加载器） webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析 plugins（插件） 扩展 Webpack 的功能 mode（模式） 主要由两种模式： 开发模式：development 生产模式：production 3.开发模式介绍（development） 开发模式顾名思义就是我们开发代码时使用的模式。 这个模式下我们主要做两件事： 编译代码，使浏览器能识别运行 开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源 代码质量检查，树立代码规范 提前检查代码的一些隐患，让代码运行时能更加健壮。 提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。 4.处理css资源 i，下载包

npm i css-loader style-loader -D

ii，配置webpack.config.js文件

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

iii，引入一些css样式 iv，运行webpack，查看打包结果

npx webpack

5.处理less资源 其实与处理css资源类似，只不过需要多配置一些代码 i，引入less-loader

npm i less-loader -D

ii，进行loader配置

{
        test: /.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },

iii，添加对应的less资源 iv，打包查看文件

npx webpack