2022-07-18发表学习笔记3 分钟读完 (大约429个字)0次访问

Webpack打包工具的使用

关于webpack

模块化

webpack可以支持前端模块化的一些方案，例如AMD、CMD、CommonJS、ES6。可以处理模块之间的依赖关系。不仅仅是js文件可以模块化，图片、css、json文件等等都可以模块化。

打包

webpack可以将模块资源打包成一个或者多个包，并且在打包过程中可以处理资源，例如压缩图片，将scss转成css，ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

使用前需要安装，webpack依赖node环境。
node环境依赖众多包，所以需要npm，npm（node packages manager）node包管理工具
nvm是node管理工具可以自由切换node环境版本

基本配置

主要有两种模式

开发模式：development 仅能编译JS中的ES Module语法
生产模式：production 能编译JS中的ES Module语法，还能压缩JS代码

在项目根目录下新建配置文件 webpack.config.js

module.exports = {
  // 入口  将入口文件作为打包入口
  entry: '',
  // 输出
  output: {
    // 文件的输出路径，根目录下的dist文件夹
    path: '',
    // 输出的文件名
    filename: '',
  },
  // 加载器
  module: {
    rules: [
      // loader的配置
    ],
  },
  // 插件
  plugins: [
    // 插件的配置
  ],
  // 模式
  mode: 'development',
};