webpack基础步骤

俺就是想写写文章，整理一下思路，锻炼一下写作能力。
简单的基础知识，往往需要重复地学习~

第一步：安装webpack

1. 创建项目根目录（webpack-test）;
2. 需要初始化node配置文件（package.json），所以在项目根目录下运行：npm init；
3. 需要安装webpack、webpack-cli，所以在项目根目录下运行：npm install webpack webpack-cli --save-dev；
4. 如果需要查看版本号测试是否安装成功，所以在项目根目录下运行：npx webpack -v 和 npx webpack-cli -v。
   

第二步：创建文件，编写代码

在项目根目录下创建src文件夹，用来存放编写的代码文件，然后进行如下操作。

1. 编写content-test.js文件，目录：./src/

   export default ()=>{
       document.write("这是一个内容编写文件的输出结果")
   }
   

2. 编写index.js文件，目录：./src/

   import say from './content-test'
   say()
   

第三步：webpack打包

1. 运行命令：npx webpack --entry=./src/index.js --output-filename=output.js --mode=development，即可打包生成dist目录下的输出文件output.js。
   
2. 创建index.html文件，引入：<script src="./dist/output.js"></script>
   
3. 浏览器打开index.html
   
   结束了。