webpack4.x 基础

本篇文章简要地讲解了 webpack 4.x 的入门知识，适合想了解、学习 webpack 的小白

引文

webpack说白了就是一个打包工具，可以预先配置好打包设定，并约定好适用于各种不同文件类型的loader，以及可能用到的插件 📥 等，然后其他的事情就交给webpack，它会将你项目中的所有 js 文件、样式 文件、图片或字体资源等等打包在一起。webpack让开发者的代码更易编写、维护的同时，也提高了生产效率。
安装

    在开始之前，请确保安装了 Node.js 的较新版本

    全局安装

    即：webpack 命令已加入环境变量，全局下可用

    npm install -g webpack
    npm install -g webpack-cli

    本地安装

    即：仅在当前项目配置 webpack 的开发环境

    npm install --save-dev webpack
    npm install --save-dev webpack-cli

配置 npm 脚本

编辑项目根目录下的package.json文件。

    package.json 是 nodejs 项目的描述文件，详见npm 文档-https://docs.npmjs.com/files/package.json

// package.json
"scripts": {
  "webpack": "webpack --config webpack.config.js"
}

Webpack的配置

可在项目根目录下建一个 webpack.config.js 文件作为 webpack 的配置文件，webpack在执行的时候会读取这个配置文件并将其作为打包的配置进行打包。