Webpack 安装部署

最新推荐文章于 2023-01-31 20:14:51 发布

JunChow520

最新推荐文章于 2023-01-31 20:14:51 发布

阅读量148

点赞数

本文链接：https://blog.csdn.net/JunChow520/article/details/103030681

版权

webpack是现代JS应用程序的静态模块打包器module bundler，当webpack处理应用程序时，会递归地构建一个依赖关系图denpendency graph，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundle。

安装部署

安装版本： webpack 4.x

操作步骤：

创建工程目录
初始化工程
全局安装webpack和webpack-cli
配置脚本

注意事项：

webpack-cli必须全局安装否则无法使用webpack指令
webpack必须全局安装否则也不能使用webpack指令
webpack4.x中的配置文件webpack.config.js不是必须的
webpack默认入口文件为./src/index.js，需手工建立。
webpack默认输出文件为./dist/main.js，打包后将自动生成。

# 检查环境
$ node -v
v8.1.2

$ npm -v
5.3.0

全局安装webpack及脚手架

# 全局安装webpack与webpack-cli，可在任何目录中通过CLI使用webpack命令。
$ npm i webpack webpack-cli -g 

# 查看版本
$ webpack -v
4.12.0

安全安装后将会在Windows系统中C:\Users\yourname\AppData\Roaming\npm\node_modules目录下创建webpack与webpack-cli目录，存放全局安装的webpack与webpack-cli模块。

创建项目

# 创建目录
$ mkdir projects && cd projects
$ mkdir demo && cd demo

# 初始化项目，生成package.json，即使用npm管理项目中的包。
$ npm init -y
# 自动生成package.json文件
$ npm init

# 开发环境安装webpack，执行当前项目的构建，为项目添加webpack依赖。
# 本地安装webpack，会将依赖写入package.json中。
$ npm i webpack --save-dev
# 简写方式
$ npm i webpack -D

# 在项目中本地安装webpack-cli，注意-D只是--save-dev的简写。
$ npm i webpack-cli -D

不推荐安全安装webpack，它会锁定webpack到指定版本，在使用不同webpack版本的项目中可能会导致构建失败。

在项目使用npm首先会在本地模块中寻找webpack。

# package.json
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src test/unit/specs",
    "build": "node build/build.js"
  },

本地安装webpack后，node_modules/.bin/webpack是它的二进制程序。

webpack 打包

webpack4.x是以项目根目录./src/index.js目录作为入口，需手工建立。
webpack4.x不再使用webpack file1 file2的方式，而是直接运行webpack --mode development或webpack --mode production进行打包。

# 创建项目根目录与默认入口文件
$ mkdir src && cd src
$ vim index.js

# 默认进行打包，入口文件为./src/index.js，输出路径为./dist/main.js
$ webpack --mode development
$ webpack --mode production

配置npm命令便捷执行打包

# 配置快捷命令，执行npm run dev相当于webpack --mode development，执行npm run build相当于webpack --mode production。
$ vim package.json
  "scripts": {
    "dev":"webpack --mode development",
    "build":"webpack --mode production"
  },

# 重新安装
$ npm i