webpack4环境搭建-初始化项目

1、创建一个目录然后进入，初始化package.json

cnpm init -y //-y的意思是yes的意思，在init的时候省去了敲回车的步骤，生成的默认的package.json

2、安装webpack4,webpack-cli

cnpm i webpack webpack-cli --save-dev

3、然后打开package.json添加构建脚本

 "scripts": {
    "build": "webpack"
  }

执行脚本：cnpm run build 打包后会报错，提示如下：

error.png

这个提示信息，有2个地方需要注意，一个是警告信息，一个报错信息，我们先看报错信息。
为啥会报错呢?简单说就是webpack 4 需要在./src目录下找一个入口文件！webpack4默认的入口文件是./src目录下的index.js文件，这里没有，所以就报错了。

那我们在src目录下创建index.js文件，然后里面添加一行代码：

console.log("111111111111111111111")

再次执行cnpm run build 打包，执行成功，生成的dist目录下有一个mian.js文件，我们打开这个main.js文件，
如下：

main.png

从上面的图上可以看出来，我们添加的代码被打包成功，但是请注意，打包的代码是一行，也就是打包后被压缩了。这里也就引出了webpack4的开发模式和生产模式。

联想一下，上面第一次打包报错里面的信息，里面有个警告就是告诉我们在打包时候没有指名打包模式，如果不指明默认打包模式是生产模式。

打开package.json修改构建脚本

"scripts": {
    "dev": "webpack --mode=development",
    "build": "webpack --mode=production"
  },

我们执行npm run dev 和 npm run build，我们发现不会再此报警告信息了，对比下打包出来的文件，我们发现执行npm run dev 打包出来的文件有个明显的特点是没被压缩，npm run build打包出来的文件被处理了。

生产模式、开启了一系列额外的优化。包括minification, scope hoisting, tree-shaking等（后续会介绍）
开发模式、为速度做了优化，除了提供一个没有压缩的包以外没有做额外的事。

到此一个简单的webpack4配置环境就出来了。