webpack4.X学习笔记

安装和使用

安装到项目
yarn add webpack -D
yarn add webpack-cli -D

webpack会出现在package.json中,加入scrips

"scripts": {
    "build": "webpack --mode production"
},
"devDependencies": {
  "webpack": "^4.1.1",
  "webpack-cli": "^2.0.12",
}

然后创建一个 ./src/index.js 文件，写任意js代码。然后执行yarn build，新增一个dist目录，里面存放的就是构建好的main.js

webpack 4版本可以零配置开始构建

入口

一开始我们使用 webpack 构建时，默认的入口文件就是 ./src/index.js
常见项目中，如果是单页面应用，那么可能入口只有一个；如果是多个页面的项目，那么经常是一个页面对应一个构建入口
入口可以使用entry进行配置，webpack支持配置多个入口来进行构建：

module.exports = {
  entry: './src/index.js' 
}
// 上述配置等同于
module.exports = {
  entry: {
    main: './src/index.js'
  }
}
// 或者配置多个入口
module.exports = {
  entry: {
    foo: './src/page-foo.js',
    bar: './src/page-bar.js', 
    // ...
  }
}
// 使用数组来对多个文件进行打包
module.exports = {
  entry: {
    main: [
      './src/foo.js',
      './src/bar.js'
    ]
  }
}

最后的例子，可以理解为多个文件一个入口，webpack会解析两个文件的依赖后进行打包

loader

webpack 的 loader 用于处理不同的文件类型，可以把 loader 理解为是一个转换器，负责把某种文件格式的内容转换成 webpack 可以支持打包的模块
loader 是 webpack 中比较复杂的一块内容，它支撑着 webpack 来处理文件的多样性

plugin

在 webpack 的构建流程中，plugin 用于处理更多其他的一些构建任务。可以这么理解，模块代码转换的工作由 loader 来处理，除此之外的其他任何工作都可以交由 plugin 来完成.
例如：使用压缩js代码的uglifyjs-webpack-plugin插件，只需在配置中通过plugins字段，添加新的plugin即可

const UglifyPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  plugins: [
    new UglifyPlugin()
  ],
}

输出

webpack 的输出即指 webpack 最终构建出来的静态文件，可以看看上面 webpack 官方图片右侧的那些文件。当然，构建结果的文件名、路径等都是可以配置的，使用 output 字段：

module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
}

// 或者多个入口生成不同文件
module.exports = {
  entry: {
    foo: './src/foo.js',
    bar: './src/bar.js',
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
}

// 路径中使用 hash，每次构建时会有一个不同 hash 值，避免发布新版本时线上使用浏览器缓存
module.exports = {
  // ...
  output: {
    filename: '[name].js',
    path: __dirname + '/dist/[hash]',
  },
}

默认创建的输出内容就是 ./dist/main.js

小结

上述涉及的几部分配置内容合到一起，就可以创建一个简单的 webpack 配置了，webpack 运行时默认读取项目下的 webpack.config.js 文件作为配置。
在项目中创建一个 webpack.config.js 文件：

const path = require('path')
const UglifyPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  entry: './src/index.js',

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },

  module: {
    rules: [
      {
        test: /\.jsx?/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        use: 'babel-loader',
      },
    ],
  },

  // 代码模块路径解析的配置
  resolve: {
    modules: [
      "node_modules",
      path.resolve(__dirname, 'src')
    ],

    extensions: [".wasm", ".mjs", ".js", ".json", ".jsx"],
  },

  plugins: [
    new UglifyPlugin(), 
    // 使用 uglifyjs-webpack-plugin 来压缩 JS 代码
    // 如果你留意了我们一开始直接使用 webpack 构建的结果，你会发现默认已经使用了 JS 代码压缩的插件
    // 这其实也是我们命令中的 --mode production 的效果，后续的小节会介绍 webpack 的 mode 参数
  ],
}

webpack 的配置其实是一个 Node.js 的脚本，这个脚本对外暴露一个配置对象，webpack 通过这个对象来读取相关的一些配置
因为是 Node.js 脚本，所以可以使用任何的 Node.js 模块，如上述用到的 path 模块，当然第三方的模块也可以