使用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.入口