webpack学习笔记

概念

作用

压缩代码

快速入门

1. npm init 初始化包环境

2. npm install webpack webpack-cli -D 安装依赖包

   -D 开发依赖，项目上线不需要

3. 配置scripts(自定义命令)

   scripts:{
       "build":"webpack"
   }
   

4. 新建目录src

5. 新建src/add/add.js 定义求和函数导出

   export const addFn = (a,b) => a + b
   

6. 新建src/index.js导入使用

   import {addFn} from './add/add.js'
   
   console.log(addFn(10,20));
   

7. 运行打包命令

   npm run build
   

更改webpack的设置

修改出入口

默认入口：‘./src/index.js’

默认出口：‘./dist/main.js’

1. 新建src并列处，webpack.config.js

2. 填入配置项

   const path = require('path')
   
   module.exports = {
       entry: './src/index.js',//入口
       output: {
           path: path.join(__dirname, 'dist'),//出口路径，输出到同级下的dist目录中
           filename: 'main.js',//出口文件名
       }
   }
   

ES6模块化语法

导入

import {名称} from '模块'   //配合export使用
import dayjs from 'dayjs'  //配合export default使用

导出

export const 名称 = 数据
export default dayjs //一个js文件只能有一个默认导出

补充

git忽略文件

1. 在项目根目录下创建.gitignore文件

2. node_modules