webpack初始使用方式

为什么学习webpack

• 减少文件数量
  缩减代码体积
  提高浏览器打开速度

 

webpack基础概述:

webpack本质也是 node里面的 一个第三方的包.用于分析.打包.整合

• 支持所有类型

• 

使用以前准备环境准备

1.初始化包环境

yarm init

2.安装依赖包

yarn add webpack webpack-cli -D

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

//打开package.json最下面输入 //build建议不修改
"scripts":{
    "build":"webpack"
},

webpack如何使用.打包

1.创建一个src文件夹.因为是 webpack默认的路径
2.在src下创建一个 index.js
3.在src文件夹里面创建一个文件夹add
4.在add文件里面创建一个add.js
5.在add.js中
export const addFn = (a,b) => a + b
6.在index.js中
//webpack 打包入口
import { addFn } from './add/add'
console.log(addFn(5,2));
7.在当前终端中输入yarn build
8.这时会出现一个dist的文件夹. 里面是main.js 打包好的文件.
(()=>{"use strict";console.log(7)})();

如果需要打包新的项目

在src下创建新的文件夹
然后在当前文件夹下面打开终端执行package.json的里面的 yarn build 进行打包

修改默认入口和出口

1.在当前文件夹根目录创建 `webpack.config.js`文件
2.在 webpack.config.js里输入
​
const path = require('path');
​
module.exports = {
  entry: './src/main.js',//入口修改. 一定要对应修改文件原名
  output: {//出口设置
    path: path.resolve(__dirname, 'dist'),//获取当前的绝对路径
    filename: 'bundle.js',//出口名字
  },
};
3.修改完毕以后.删除之前的 dist 文件夹.
4.在main.js终端 重新输出  yarn build 生成新的出口打包文件

根据文档:https://webpack.docschina.org/concepts/#entry 

yarn build 执行流程图