新版Webpack 4 我的第一个项目

优势：webpack4比webpack 3.6版本性能更高

**新建一个文件夹，webpack4_test **

（1）通过cmd 进入该文件夹下，输入npm init -y命令初始化工程

D:\桌面文件\webpack4_test>npm init -y

（2）安装webpack

npm install --save webpack

（3）此时会生成一个新的文件夹node_modules，其里面存放了自动安装相关的依赖包，并且在package.json中会自动增加Webpack的最新版本。为了更好的达到管理webpack包的功能，需要安装webpack-cli 命令 nmp install -save webpack-cli

nmp install -save webpack-cli

（4）修改package.json 新建一个bulid命令 和dev、productio命令

{
  "name": "webpack4_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev":"webpack --mode development",
    "production":"webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.39.0",
    "webpack-cli": "^3.3.6"
  }
}

（5）在webpack 4中，不需要定义入口点。默认值为./src/index.js

在index.js文件中添加代码，弹出一个提示框

alert("你好")

（6）运行cmd 在此目录路径下使用 npm run build 运行成功后，自动创建dist文件夹，并成功生成main.js文件

（7）如果在第4步骤，不添加dev 和production，将会在警告错误。翻译一下就是 在配置文件中，有两个命令一种是用于加速开发，减少构建时间而不考虑生成大小的开发模式development，一种是完全用于生产环境的生产模式

   "dev":"webpack --mode development",
    "production":"webpack --mode production"

（8）终极运行
新建一个html 引入main.js