kkb --- webpack实战

体验webpack

• npm init -y
• 局部安装webpack：  （不推荐全局安装，全局安装会造成版本不稳定，如果多个项目依赖的版本不同，会造成构建失败）
• npm i webpack webpack-cli -D
• 查看webpack版本：   npx webpack -v   （去当前项目中去找）
• 创建src目录，新建 index.js 文件，写入  console.log('hello webpack')
• 打开 package.json 文件，将scripts下的 test命令修改为  "test": "webpack"
• 在命令行执行 npm run test后，此时发现目录中多个个dist文件夹，新建个 index.html 文件，然后引入dist中的 main.js 就可以查看到 hello webpack

webpack is a module bundle（模块打包工具）

Webpack是一个打包模块化JavaScript的工具，它会从入口模块出发，识别出源码中的模块化导入语句，递归的找出入口文件的所有依赖，将入口和其所有的依赖打包到一个单独的文件中。

是工程化、自动化思想在前端开发中的体现。

webpack的默认配置

• 默认入口模块
  • ./src/index.js
• 默认输出模块
  • 名称： main.js
  • 路径：./dist
• webpack默认支持多种模块类型：commonJS、ESModule、AMD
• webpack默认支持 js 模块和 json 模块

webpack不适合用于 JavaScript 库的构建，因为不够纯粹，库一般用 rollup 构建

修改默认配置

新建 webpack.config.js 文件

const path = require('path')

module.exports = {
  // webpack的执行入口
  entry: './src/index.js',
  // 输出
  output: {
    // 输出到哪里，必须是绝对路径
    path: path.resolve(__dirname, "./dist"),
    filename: "main.js"
  },
  // 模式（开发模式或生产模式）
  mode: "development"
}

使用多份配置：

新建 webpack.dev.config.js 文件

const path = require('path')

module.exports = {
  // webpack的执行入口
  entry: './src/index.js',
  // 输出
  output: {
    // 输出到哪里，必须是绝对路径
    path: path.resolve(__dirname, "./build"),
    filename: "index.js"
  },
  // 模式（开发模式或生产模式）
  mode: "development"
}

在 package.json 文件的scripts下加入：

"dev": "webpack --config webpack.dev.config.js"

执行 npm run dev 就会执行 webpack.dev.config.js 这份配置

 

项目中使用图片，webpack需要使用 loader来解析图片

• 安装：npm i file-loader -D
• 在webpack的配置文件中使用loader

// 处理模块
module: {
  rules: [
    // .css .png .ts .jsx等多种类型的格式文件
    // 处理图片
    {
      test: /.(jpe?g|png|gif)$/,
      use: ["file-loader"]
    }
  ]
}

• 在项目中使用图片

import pic from './logo.jpg'

var img = new Image()
img.src = pic

var app = document.getElementById('app')
app.append(img)