webpack原理学习

1.新建一个空文件夹demo1

在该路径下cmd窗口打开，输入npm init初始化一个项目

此时文件夹中会生成一个package.json文件，备注：此时项目中只有这一个文件。

2.安装依赖npm install loadash --save

备注：--save是为了项目帮助记住依赖信息，从npm 5以上的版本会默认加上这个参数，所以不写--save也没关系。

npm install jquery --save-dev

备注：dependencies一般对应生产环境的依赖，devDependencies是开发环境的依赖，一般用于装一些开发辅助（如eslint）依赖。不添加任何参数（npm install)这两种包都会安装到node_modules中，npm install --only=dev/npm install --only=prod:只安装开发环境/生产环境的包，加快安装的速度。

3.cmd窗口执行webpack执行打包,若报错，可能是webpack-cli没装，执行下npm install webpack-cli -g

备注：webpack打包的默认打包入口就是src文件下的index.js，默认出口文件就是dist mian.js

4.自定义配置

新建一个webpack.config.js，自定义打包的入口文件为app.js，出口文件为dist文件夹下面的bundle.js

entry:工程资源的入口，它可以是一个文件也可以是多个文件

output:打包结果的配置，path有一个要求(必须是绝对路径)

5.安装webpack-dev-server

webpack-dev-server打包的特殊之处，它不会生成一个打包后的文件，但页面又可以正常访问，就好像是把文件放在了一个内存当中。

额外拓展loader：

loader是文件加载器

webpack项目可以在js文件中import引入css或png文件，原因是因为loader的存在，loader的使用需要先安装，npm install css-loader --save-dev，loader的引入在每一个webpack版本中都不太一样。为了使样式生效也要安装：npm install style-loader --save-dev，必须是css-loader在style-loader之后。