webpack 4.0 终极笔记：从新手到精通

前言

webpack 是一种流行的 JavaScript 模块打包器，用于将应用程序代码中的模块打包成单个文件。webpack 4.0 引入了许多新特性和改进，使开发人员能够更轻松高效地管理他们的应用程序构建过程。

开发环境配置

1. 安装依赖

npm install --save-dev webpack webpack-cli

2. module.use 数组中 loader 的执行顺序

webpack 中，loader 以数组形式配置在 module.use 中。执行顺序遵循数组的顺序，从第一个 loader 开始，依次执行后续 loader。

3. 处理 CSS 文件

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

4. 处理 SCSS/LESS 文件

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  }
};

5. 处理 HTML 资源

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        use: ['html-loader']
      }
    ]
  }
};

6. 打包图片资源

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: ['file-loader']
      }
    ]
  }
};

7. 打包其他资源

module.exports = {
  module: {
    rules: [
      {
        test: /\.(eot|ttf|woff|woff2)$/,
        use: ['file-loader']
      }
    ]
  }
};

8. 开发服务器 devServer

module.exports = {
  devServer: {
    port: 8080,
    open: true
  }
};

9. 各种打包报错

• Module not found ：确保模块已安装，路径正确。
• Syntax error ：检查代码是否存在语法错误。
• Module parse failed ：确保模块是有效的 JavaScript 文件。
• Compilation failed ：仔细检查错误信息，解决任何未解决的依赖项或配置问题。

结语

掌握 webpack 4.0 的核心概念和实践，可以显著提升应用程序开发效率和代码质量。通过这份全面的笔记，开发者可以充分理解 webpack 的工作原理，优化他们的构建过程，从而创建可靠且高效的 Web 应用程序。