webpack4 来啦！

安装webpack4

  依赖

npm install --save  上线开发都需要。

npm i -D 是 npm install --save-dev 的简写，是指安装模块并保存到 package.json 的 devDependencies中，主要在开发环境中的依赖包。

 安装webpack

为了开发中保证每个开发人员的webpack版本号一样，最好是安装到当前项目下。（不要全局安装 npm i webpack -g）

webpack一般开发中使用，上线的时候不需要，webpack4中除了正常安装webpack之外，需要再单独安一个webpack-cli （npm i webpack webpack-cli -D）

1、cd xxx 进入当前项目，npm init -y 初始化，生成package.json（建议node版本安装到8.2以上）

2、npm i webpack webpack-cli -D  安装webpack

webpack4可以0配置

webpack4可以0配置，但是一般不会这么用，因为不够智能。

0配置有要求，首先要有默认文件夹src，src下要有默认入口文件index.js，可以找到src下的index.js进行默认打包，会默认支持commonjs规范，es6模块规范，cmd，amd，打包后  代码可以直接跑在浏览器端

1、建立src文件夹，src文件夹下建立index.js，index.js输入内容

2、npx webpack  打包自动生成main.js

node v8.5版本以后会有一个npx，npx + 文件名  可以直接去node_modules下bin文件里找到要执行的文件，如果这个文件不存在的话，会帮你安装

npx webpack // 不设置mode的情况下 打包出来的文件会自动压缩（默认是生产模式）

npx webpack --mode development // 设置mode为开发模式，打包后的文件不被压缩

3、index.js   引用a.js  （默认就支持node的写法  自动转化；默认支持各种模块化） 

再次  npx webpack --mode development  打包，打包成功后找到index.html  浏览器打开显示   hello  就能看到打包成功啦。

0配置自动打包的main.js  index.js名字是默认规定好了的，不能改名，不然报错，这个时候需要到当前项目根目录下建立一个webpack.config.js（默认情况下就叫webpack.config.js  可修改）。

webpack是基于node的 用的语法commonjs规范

下面就进入我们的常规操作环节

在项目下创建一个webpack.config.js(默认，可修改)文件来配置webpack

以上就是webpack的正常配置模块

按照项目的结构，我们就从0开始去写一下配置吧

打包前文件目录

写配置（最简单的webpack配置）

npx webpack  打包

打包后文件目录 

配置执行文件

工作当中我们打包编译的时候一般不会执行npx webpack这样的命令，都是执行npm run dev这样的命令，既然是通过npm执行的命令，我们就应该找到package.json里的执行脚本去配置一下命令。