webpack安装及初体验

webpack安装及初体验

  webpack是前端的一个模块打包器（bundle）,主要用于前端开发时将静态资源文件。css、js、json文件构建到一个文件中，从而简化项目结构，便于开发。

1. npm init 初始化项目
   初始化后项目中会自动生成一个package.json文件
   
   2.安装webpack
   npm install webpack webpack-cli -g 全局安装
   npm install webpack webpack-cli -D 本地安装
   
   然后将webpack依赖到package.json中
   npm install webpack webpack-cli --save-dev
   安装好后，就可以看见文件中webpack的版本

3.开始构建
首先新建一个src文件夹，里面新建一个index.js文件作为webpacck构建的入口。

然后在终端里用webpack命令构建
webpack ./src/index.js -o ./dist --mode=development

webpack5开始构建时会自动生成main.js,不用指定文件名，只需要指定目录（目录不存在则自动新建）即可。
mode:指定模式，分为development(开发)，production（生产）
新建一个index.html，引入main.js，则可以看见helloworld.

到此webpack安装及初体验结束了！