webpack模块化开发（1）

webpack  - 一切都可以模块化

webpack配置:

1.init（生成package.json文件）

npm init -y 

2.安装（生成node_moduls 文件夹 和 package-lock.json）

全局 ：npm i webpack webpack-cli -g

本地: npm i webpack webpack-cli --save-dev 开发依赖(如果只需要安装在项目环境下，不用全局)

（tips：项目文件夹名不要命名为webpack，不然会显示重名无法安装）

3.命令行打包

终端输入 - webpack

abc为项目名，src是源开发目录，src/index.js - 程序主入口文件

dist - 输出目录，dist/main.js - 输出目录文件

tips：dist文件夹及其下的文件都不需要自己建，打包后会自动新建，只需在项目中引入即可，如下:

打包后自动生成的dist文件夹和子文件

dist/main.js - 生产模式下的代码被压缩了，如下样式

如果不想压缩，打包时可以配置:

webpack --mode development（等同于 webpack -p）:

开发环境下会代码如下：

默认情况下，如果不给这个配置，webpack会发一个警告:

production生产模式 特点：

1.代码优化

2.更小的main大小

3.只去掉开发阶段运行的代码

4.作用域提升、打包模块只有实际用到的导出的模块

development开发模式 特点:

1.浏览器调试工具

2.注释、开发阶段的详细错误日志和提示

3.快速和优化的增量构建机制