webpack的安装全过程

一、安装webpack

新建目录，执行npm init

1.1安装webpack到本项目（推荐）

npm i -D webpack                      //安装最新版webpack  在devDependencies下
npm install webpack-cli --save-dev   //cli的安装（如果webpack4+版本都需要安装cli，因为webpack 4将 cli 分离出来了）

1.2.1运行

start中要找到自己配置的webpack路径

  "scripts": {
    "start": "webpack ./webpack.config.js",  //优先使用本项目下的webpack
    "test": "echo \"Error: no test specified\" && exit 1"
  },

如果启动报错，显示webpack既不是内部命令，也不是运行命令，需要配置电脑环境变量，具体参考网上其他博客。

1.2安装webpack到全局

npm i -g webpack 

二、使用webpack

现在使用webpack 输出hello，webpack

2.1 新建 文件

• index.html 页面入口文件

• show.js 主要展示webpack的方法

• main.js 执行入口文件

• webpack.config.js 配置webpack文件

path要安装

运行npm start

---------------------成功-----------------------------

bundle.js文件是一个可执行的js文件，包含依赖的两个模块main.js, show.js以及内置的webpackBootstrap启动函数

网页也显示成功

三、流程

webpack是一个打包模块化js的工具

• 会从main.js出发，识别出源码中的模块化导入语句，递归找出入口文件所有依赖
• 后将入口和其他依赖打包到一个单独的文件中

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。