Webpack安装过程

Webpack四个核心概念：

• 入口(entry)：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的
• 输出(output)：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist
• loader：让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）
• 插件(plugins)：插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务

安装步骤：

• 安装node.js
• 全局安装webpack

  • 运行CMD，安装命令如下所示，其中， -g是全局安装，并移除安装了 webpack和webpack-cli

    npm install webpack webpack-cli –g

• 创建本地项目文件夹
• 本地在安装webpack
  • 输入如下命令，在项目目录中安装webpack，其中，--save-dev是本地安装

    npm install webpack webpack-cli --save-dev

• 查看webpack版本号
• 创建package.json文件
  • 输入如下命令，将在项目目录中自动生成package.json文件

    npm init -y

• 配置打包目录
  • 在项目目录下，新建config文件夹，用于存放配置文件；src文件夹，用于存放源码；out文件夹，用于存放打包生成文件，具体如下图所示。

    

 

• 添加webpack.config.js文件

 

• • 在config文件夹中添加webpack.config.js文件，并添加如下代码：

    const path=require('path'); //调用node.js中的路径
    module.exports={
        entry:{
            index:'./src/js/index.js' //需要打包的文件
        },
        output:{
            filename:'[name].js',    //输入的文件名是什么，生成的文件名也是什么
            path:path.resolve(__dirname,'../out') //指定生成的文件目录
        },
        mode:"development"    //开发模式，没有对js等文件压缩，默认生成的是压缩文件
    }

 

• 运行webpack
  • 在cmd命令窗体中，输入如下命令，运行成功后，在out目录中会生成打包后的index.js

    webpack --config config/webpack.config.js

• 配置package.json
  • 每次输入命令webpack --config config/webpack.config.js，太长，且非常不方便，此时我们可以在package.json文件中配置，如下所示：

    {
      "name": "TestWebpack",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack --config config/webpack.config.js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "clean-webpack-plugin": "^3.0.0",
        "webpack": "^4.39.3",
        "webpack-cli": "^3.3.8"
      }
    }

• 配置完成后，我们输入的如下命令，可以直接运行。

  npm run start