webpack基础步骤
俺就是想写写文章,整理一下思路,锻炼一下写作能力。
简单的基础知识,往往需要重复地学习~
第一步:安装webpack
- 创建项目根目录(webpack-test);
- 需要初始化node配置文件(package.json),所以在项目根目录下运行:
npm init
; - 需要安装webpack、webpack-cli,所以在项目根目录下运行:
npm install webpack webpack-cli --save-dev
; - 如果需要查看版本号测试是否安装成功,所以在项目根目录下运行:
npx webpack -v
和npx webpack-cli -v
。
第二步:创建文件,编写代码
在项目根目录下创建src文件夹,用来存放编写的代码文件,然后进行如下操作。
- 编写content-test.js文件,目录:
./src/
export default ()=>{ document.write("这是一个内容编写文件的输出结果") }
- 编写index.js文件,目录:
./src/
import say from './content-test' say()
第三步:webpack打包
- 运行命令:
npx webpack --entry=./src/index.js --output-filename=output.js --mode=development
,即可打包生成dist目录下的输出文件output.js。
- 创建index.html文件,引入:
<script src="./dist/output.js"></script>
- 浏览器打开index.html
结束了。