webpack具体实现–未完_代码007(未授权)

本文介绍: webpack 是 We b pack 的核心模块，webpack–cli 是 We b pack 的 CLI 程序，用来在命令行中调用 Web pack。webpack–cli 所提供的 CLI 程序就会出现在 node _modules/.bin 目录当中，我们可以通过 npx 快速找到 CLI 并运行它。npx webpack 会自动从 src/index.js 文件开始打包，然后根据代码中的模块导入操作，自动将所有用到的模块代码打包到一起。

webpack 是 Webpack 的核心模块，webpack–cli 是 Webp ack 的 CLI 程序，用来在命令行中调用 Webp ack。webpack–cli 所提供的 CLI 程序就会出现在 node _modules/.bin 目录当中，我们可以通过 npx 快速找到 CLI 并运行它。npx webpack 会自动从 src/index.js 文件开始打包，然后根据代码中的模块导入操作，自动将所有用到的模块代码打包到一起。之后项目的根目录下多出了一个 dist 目录，我们的打包结果就存放在这个目录下的 main.js 文件中。

在项目的根目录 src下添加一个 web p ac k.config.js，web p ac k.config.js 是一个运行在 Node.js 环境中的 JS 文件，也就是说我们需要按照 Co mm onJS 的方式编写代码，这个文件可以导出一个对象，我们可以通过所导出对象的属性完成相应的配置选项。

// ./webpack.config.js
import { Configuration } from 'webpack'  //代码提示
/**
 * @type {Configuration}
 */
const config = {
  entry: './src/index.js',
//resolve 配置是帮助 Webpack 查找依赖模块的，通过 resolve 的配置，
//可以帮助 Webpack 快速查找依赖，也可以替换对应的依赖
  output: {
    filename: 'bundle.js'
    path: path.join(__dirname, 'output')
  },
//resolve.extensions是帮助 Webpack 解析扩展名的配置
 resolve: {
     extensions: ['.js', '.json', '.css'],
     alias: {
            src: path.resolve(__dirname, 'src'),
            '@lib': path.resolve(__dirname, 'src/lib')
        }
  },
//
 mode: 'development',
}
module.exports = config

Loa de r 本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。因为 Webpa ck 只认识 Jav aSc rip t，所以 Loa de r 就成了翻译官，对其他类型的资源进行转译的预处理工作。

sass–loader与less–loader将代码转换成 css。postcss–loader将CSS文件自动添加浏览器前缀。css–loader :允许将css文件通过 require的方式引入，并返回 css代码，然后将 css 资源转为 Co mm onJS 的 JS 模块。style–loader将 Co mm onJS 模块生成一个 style 标签插入到最终的文档中。

file-loader 支持在 JS 模块中引入诸如 png、jpg、svg 等文本或二进制文件，并将文件写出到输出目录

vue-loader是用于处理单文件组件。 script 块中的内容被作为 js 处理，对所有*.js 配置了 babel–lo a der。需要用 Vue 模板编译器编译 template，从而得到 render 函数。需要对<style scoped>中的 CSS 做后处理（post–process），该操作在 css–lo a der 之后但在 style–loader 之前

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, (compilation) =&gt; {
      console.log('webpack 构建过程开始！');
    });
  }
}

module.exports = ConsoleLogOnBuildWebpackPlugin;