【webpack】入门 - 使用webpack进行工程化开发

使用webpack进行工程化开发

1.检查本地安装的版本

webpack -v

2.在本地全局安装（指定版本）

// 安装核心库
npm install webpack@4 -g
// 安装工具
npm install webpack-cli@3 -g

3.在当前项目安装webpack

• 在当前项目里初始化一个包的描述文件

npm init -y

• 再安装webpack和webpack-cli（开发环境-D）

npm install webpack@4 -D
npm install webpack-cli@3 -D

使用webpack打包文件

1.创建src目录，并在src目录下创建main.js,并准备一些js文件

• demo1.js

// 创建一个add方法，并且导出
let add = function(x, y) {
   
  return x+y
}

export default {
   
  add
}

• demo2.js

// 引入demo1模块的add方法
import {
    add } from './demo1'

const [num1, num2] = [100, 20]
const res = add(num1, num2)
console.log('计算结果：', res);

• main.js

// main.js是我们的入口文件

// 所有需要执行的文件都应该在入口文件中引入
import './demo2'

2.新建webpack.config.js

• 配置写在module.exports里面

• 配置项分为5种：entry（入口）、output（输出）、loader、plugin、configuration

• 动手把下面的代码写一写：

const path = require('path')

module.esports = {
   
    // 1.入口