安装webpack并打包-白红宇

1、安装webpack

mkdir webpack5281//新建文件夹cd webpack5281//进入文件夹npm init -y//运行默认yesnpm install webpack webpack-cli --save-dev//安装webpack webpack-clicd \node_modules\.bin>webpack -v //进入bin查看版本复制代码

2、配置webpack 新建webpack.config.js

'use strict';const path=require('path');module.exports={    entry:'./src/index.js',    output:{        path:path.join(__dirname,'dist'),        filename:'bundle.js'    },    mode:'production'}复制代码

新建src文件夹 src下面新建 helloWorld'.js

export function helloWorld() {    return 'Hello,webpack';}复制代码

index.js

import { helloWorld } from "./helloWorld";document.write(helloWorld())复制代码

准备开始打包打包之前现将package.json里面添加

"scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "start": "webpack"  },复制代码

或者

"scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "build":"webpac  },k"复制代码

3、打包

npm start

或者 npm run build

Asset:打包这次生成的文件

Size:这次生成文件的大小

Chunks:这次打包的分块

chunk Names:这次打包的名称

4、查看在生成的dist文件夹里面新建HTML并引入生成的bundle.js

复制代码

然后在浏览器中查看