1.小试牛刀-一个最简单的例子
新建文件夹, 使用VScode 打开,在vscode中打开新终端, node -v和npm -v确认你已经安装了Node和npm
- 构建package.json 文件 输入命令 npm init -y
- 安装webpack webpack-cli npm install webpack webpack-cli --save -dev 会出现node_modules文件夹
- 新建webpack.config.js 文件,配置打包文件的位置和打包好后的文件名,文件位置
-
'use strict' const path =require('path'); module.exports={ entry:'./src/index.js', output:{ path : path.join(__dirname,'dist'), filename: 'bunble.js' }, mode:'production' }
- .创建src文件夹,新建hello.js和index.js。
- hello.js内容
export function helloword(){ return "hello webpack" }
-
index.js内容
import {helloword} from './hello' document.write(helloword())
- hello.js内容
- 执行打包命令 ./node_modules/.bin/webpack
- 假如报错 Insufficient number of arguments or no entry found.Alternatively, run 'webpack(-cli) --help' for usage info.
- 查看配置文件中entry 有没有问题
- 打包成功文件将在dist文件夹中bunble.js。可以创建Html文件引入该文件,和引入index.js文件相同效果
- 为了方便打包, 在package.json 文件中,加入
- 接下来打包命令可为npm run build
浪波激泥