【webpack】 webpack的安装

【webpack】 webpack的安装

一、安装webpack

1, 新建目录,执行npm init

1.1安装webpack到本项目(推荐)

javascript">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的工具

  1. 会从main.js出发,识别出源码中的模块化导入语句,递归找出入口文件所有依赖
  2. 后将入口和其他依赖打包到一个单独的文件中
转载请说明出处内容投诉
CSS教程_站长资源网 » 【webpack】 webpack的安装

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买