Webpack4 高手之路 第一天

Webpack 基础配置01

---

安装配置

---

• 这里默认已经安装了node环境
  检查node是否安装命令 node -v
• 创建项目文件夹
  例如创建如下文件夹 webpack-demo
  

• 创建配置项

  npm init

  或者

  npm init --y

  此时生成package.json文件

• 全局安装webpack和webpack-cli

  npm install webpack webpack-cli -g

• 在项目文件夹中安装webpack和webpack-cli

  npm install webpack webpack-cli --save-dev

• 安装结束后在编辑器中打开项目
  
• 打开pakage.json文件，出现webpack和webpack-cli的版本号，即表示安装成功

• 配置生产和开发模式
  pakage.json中"scripts"参数表示自定义命令，这里我们可以添加如下代码:
  

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

• 创建入口文件

  ./src/script/main.js

  

• 在项目路径下创建webpack配置文件，默认不需要配置，这里我们可以自定配置选项
  

  entry表示入口文件的地址；output表示输出信息，其中，path为输出文件的目录地址，如果没有则自动生成（**必须要绝对路径**），filename表示生成的文件名

• 项目文件夹下创建一个dist文件夹，存放打包后的js文件

• 运行：

  npm run dev 表示开发模式

  

  打包完成，此时在./dist/js/下生成了一个bundle.js文件

  npm run build 表示生产模式，此时的main.js 被压缩

• 创建index.html 引入打包好的bundle.js文件
  
• 在浏览器中打开index.html文件，打开控制台:
  

正确无误输出了我们在入口js文件中编写的代码，打包成功！