webpack 4.x 初级学习记录

webpack 4.x 初级学习记录

webpack 4.x 安装

  1. 首先需要在全局中安装
1
2
npm install webpack -g
npm install webpack-cli -g // 与webpack 3.x 的区别
  1. 接下来打开新的文件夹,创建package.json
1
npm init

初始化 package.json 文件。

  1. 局部安装
1
2
npm install webpack --save
npm install webpack-cli --save

webpack 4.x 基本打包编译

  1. webpack 3.x 编译
1
webpack a.js b.js
1
2
3
4
# {extry file}出填写入口文件的路径,本文中就是上述main.js的路径,
# {destination for bundled file}处填写打包文件的存放路径
# 填写路径的时候不用添加{}
webpack {entry file} {destination for bundled file}

以上就是4版本之前的使用方式,但是这种方式在4版本中就不能使用了,4版本有自己的新的方式

  1. webpack 4.x 默认打包编译

为什么上面要写默认打包编译,是因为webpack可以自定义打包编译配置,我们首先说下默认的打包编译。

1
2
entry: "/src/index.js"  // 默认入口文件
output: "/dist/main.js" // 默认输入文件

上面路径及文件中,srcindex.js 需要我们手动去创建,在 index.js 中写好js代码即可,其余的 distmain.js 都是由系统自动生成的,并且当你再一次编译时,会自动的在 dist 中覆盖同名文件。

而webpack 4.x 的编译命令也发生变化了,如下所示,分为开发环境和生产环境的命令

1
2
webpack --mode development
webpack --mode production

使用命令后,会自动生成文件。

配置 package.json 文件

1
2
3
4
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}

可以使用 npm ruin devnpm run build 进行执行命令

webpack 配置

概念

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要的每个模块,然后将所有这