Webpack 4 学习（基础配置和js文件的打包）

一、安装配置

• 【前提】安装node.js环境

  【官网下载】

  安装教程不赘述

• 创建项目文件夹

  例如创建如下文件夹webpack_demo1

  

• 创建配置项

  npm init -y

  生成一个package.json文件 如下图

  

• 全局安装webpack （不推荐，进行下一步操作）

  npm install webpack -g

• 局部安装webpack(推荐)

  npm install webpack --save-dev

  • 另外，webpack 4要求安装包

  npm install webpack-cli --save-dev

一起安装

npm install webpack webpack-cli --save-dev

以下表示安装成功

• 创建入口文件

  ./src/index.js

  

  任意编写index.js文件内容用于测试

• 配置生产和开发模式

  打开package.json文件添加如下脚本

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

  

• 现在运行：

  npm run dev

  生成dist/main.js ，其中 main.js 没有压缩

  npm run dev 表示

  开发模式

  

  npm run build

  此时的main.js 被压缩 ，这便是生产模式

  

• 接下来看看打包的js文件是否能够使用

  • 创建index.html 引入打包好的main.js

• 打开浏览器调试

  

​

​ 输出结果表示打包成功，大功告成 ！！！

​

​

​ 【参考文献】

​