webpack入门进阶（1）

1.webpack应用实例

1.1.快速上手

初始化项目

mkdir webpack-demo
cd webpack-demo
npm init -y

安装webpack

npm i webpack@4.41.0 webpack-cli@3.3.9 -D

零配置使用webpack，webpack约束源文件目录必须为src， 默认配置文件为 src/index.js

我们新建目录如下：

webpack-demo
├── node_modules
├── src
|   ├── index.js
|   └── module1.js
├── package.json
├── package-lock.json

index.js

const fn1 = require("./module1")
fn1()

module1.js

function fn1() {
  alert(1)
}
module.exports = fn1

运行

npx webpack

注意： npx是npm的一个包运行器，是npm 5.2版本后提供的一个工具，它会自动找到项目下 node_modules/.bin下的相关命令来运行

接下来，我们将运行命令配置到package.json

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

配置完成后，我们就可以使用npm run dev来执行webpack命令了，注意： --mode是webpack的模式，有开发模式(development)和生产模式(production)

1.2.自定义配置文件

在前面我们使用的是webpack4的零配置运行的项目，如果我们需要实现更多的功能，我们需要自定义配置，比如：我们可以更改入口文件名、可以使用各种loader、插件等，webpack的配置文件名字通常是固定的，即webpack.config.js,配置都往这个文件里面写，因此，我们需要在项目根目录下创建好这个文件

// 引入nodejs的path模块来处理路径
const path = require("path")
module.exports = {
  // 模式配置
  mode: "development",
  // 入口文件  通常使用绝对路径
  entry: path.resolve(__dirname, "./src/index.js"),
  // 出口配置
  output: {
    filename: "app.js",
    path: path.resolve(__dirname, "dist")
  }
}

上面已经在配置文件里设置了模式，因此，在package.json中就不需要传入mode这个参数了

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
  },

1.3.拆分配置文件

一般情况下，我们的环境会分为开发环境和生成环境，代码在开发阶段和部署到生成环境的配置有些是不一样的，因此，我们希望把这两种环境配置中不一样的配置分别写到不同的文件里面，这样方便区分，易于维护，把两种环境都相同的配置，放到一个基本配置文件里面，所以我们至少要将配置文件拆分成三个文件

拆分后，我们的目录是这样的：

webpack-demo
├── build
|   ├── webpack.base.js
|   ├── webpack.dev.js
|   └── webpack.prod.js
├── node_modules
├── src
|   ├── index.js
|   └── module1.js
├── package.json
├── p

我们如何来区分开发环境还是生产环境呢？ 当我们运行webpack的时候，如果加了环境参数，我们是可以在配置文件中获取到的，例如：

  "dev": "webpack --env.development"

上面的运行命令中增加了，--env.development这个参数，我们在配置文件中就可以获取到，获取方式如下

// 当我们导出的时候是一个函数，第一个参数就是环境变量，我们就可以在环境变量里拿到对应的环境
module.exports = function(env) {
  // { development: true }
  console.log(env)
}

基于以上的知识点，我们区分开发模式和生产模式的步骤为：

1. 执行webpack命令的时候 传入环境参数  --env.development || --env.production

2. 在webpack基本配置文件(webpack.base.js)中去获取环境参数

3. 根据环境参数再去区分到底是去加载 webpack.dev.js 中的配置 还是去加载webpack.prod.js

build/webpack.base.js

const dev = require("../build/webpack.dev")
const prod = require("../build/webpack.prod")
const path = require("path")
// 注意：需要先去安装这个包 npm i webpack-merge -D  这个包的作用是将配置合并
const merge = require("webpack-merge")
module.exports = function(env) {
  const isDev = env.development
  const base = {
    entry: path.resolve(__dirname, "../src/index.js"),
    output: {
      filename: "index.js",
      path: path.resolve(__dirname, "../dist")
    }
  }
  if (isDev) {
    return merge(base, dev)
  } else {
    return merge(base, prod)
  }
}

build/webpack.dev.js

module.exports = {
  mode: "development"
}

build/webpack.prod.js

module.exports = {
  mode: "production"
}

注意：在运行的时候，我们就要去指定配置文件了， 通过--config来实现指定配置文件

package.json中的配置

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --env.development --config ./build/webpack.base.js"
  },

可以尝试着将上面--env.development 修改成--env.prodution试试看效果

螺钉课堂视频课程地址：http://edu.nodeing.com