快速使用WebPack打包工具

webpack

webpack是一个JS静态资源打包工具

1 前端模块化

1.2 模块化

  • 模块
  1. AMD
  2. CMD
  3. CommonJS
  4. ES6
  • webpack支持模块化开发

  • 可以帮助处理模块之间的关系

  • 不仅js可以被看做模块,在webpack中图片、json文件、CSS均可被看做模块使用

1.3 grunt与glup的对比

  1. grunt、glup的核心是Task
  2. grunt、glup是前端自动化工具
  3. 过程:首先我们定义一系列task让glup和grunt依次执行task,使流程自动化。

1.4 Glup的task案例

快速使用WebPack打包工具_第1张图片

task将src夹下的所有js文件转为ES6语法然后在,在dist文件夹中输出。

1.5 使用

  1. 工程依赖度低,并且模块化概念呢用的少只需要使用grunt、glunpjiukeyi;
  2. 如果说是整个项目用了模块化管理,并且相互依赖强,就使用更加强大的webpack

1.6 不同点

  1. grunt与glup强调流程zhidonghua,模块化不是核心
  2. webpack具有grunt与glup的功能,但是更加强调的是模块化

2 webpack安装

2.1 注意

npm包关机工具,其中node依赖这个npm这个包,才可以正常使用。

node首先需要安装好才可以使用webpack建议node8.9版本以上

2.2 安装webpack

2.2.1 查看node版本

快速使用WebPack打包工具_第2张图片

2.2.2 安装webpack

  1. 在cmd命令中输入

image-20210827225854518

  1. 全局安装:

    等待一会儿装3.6.0版本的尽量和脚手架版本一致

    npm install [email protected] -g
    

    快速使用WebPack打包工具_第3张图片

    webpack -v查看一下是不是已经安装好了

  2. 局部安装:

    安装在相应的文件空间里面

    2 Vue CLI

    2.1文件架构

    image-20210827230614029

    2.2 webpack打包

    因为有很多js文件不方便管理所有我们需要使用webpack对我们的文件进行打包

    2.2.1 操作

    快速使用WebPack打包工具_第4张图片

    现在我们只有两个文件还好,但是一旦出现一个大项目,有很多js那么代码编写以及管理,那我们按照之前一个个应用就不方便,所以我们需要使用webpack。

  3. 源码:

    • a.js

      const add ="11111";
      export default add;
      
    • main.js

      import add from "./a.js";
      console.log(add);
      
    • webpack详解.html

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      <!--  webpack-->
      </head>
      <body>
      <script src="./dist/bundle.js"></script>
      <script src="../vue.js"></script>
      
      </body>
      </html>
      
      1. 打包
      webpack ./src/main.js ./dist/bundle.js
      
      

      快速使用WebPack打包工具_第5张图片

      1. 运行一下:

      可以看到我们的效果出来了,打印出了111,在这里我是使用ES6模块化写的,当然你们也可以使用其他模块化编写方式。

      快速使用WebPack打包工具_第6张图片

2.2 webpack配置

2.2.1 创建一个配置文件

webpack.config.js

让它自动导出到我们指定的的一个路径成为一个指定文件。

快速使用WebPack打包工具_第7张图片

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

2.2.2 初始化npm环境

npm init

回车第一个文件名字改一下,其他的默认选项回车即可,最后选择yes我们就可以了

快速使用WebPack打包工具_第8张图片

这个时候我们就会发现我们多了一个配置文件打开看看:

快速使用WebPack打包工具_第9张图片

查看配置文件详情:

{
     
  "name": "index",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
     
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2.2.3 配置配置文件

Script下配置命令

添加一行命令:

"build":"webpack"

快速使用WebPack打包工具_第10张图片

运行

可以进行npm run build 不用在使用webpack打包

为什么要修改呢?原因在下面:

  1. 使用 npm run build是优先本地打包,而webpack则是全局打包。
  2. 所以使用npm run build更好,可以减少版本webpack冲突,配置冲突。

3 本地安装Webpack

3.1 区分概念

3.1.1 开发时依赖

就是全局的,然后终端运行起效。

3.1.2 运行时依赖

本地依赖,独立的小空间的依赖,可以与其他依赖版本不同。

3.2 安装本地依赖

image-20210828000930111

npm install webpack@3.6.0 --save-dev

我们再到package.json中查看时就会发现,我们的文件有了改动

快速使用WebPack打包工具_第11张图片

最下面多了webpack,这个就是我们在本地安装的webpack。

3.3 注意:

终端敲命令:用的都是全局打包

但是当我们定义一个脚本之后我们就可以优先在本地用,否则想在终端就必须定位到夹下面,然后跑。

3.4 运行

敲一个

npm run build

快速使用WebPack打包工具_第12张图片

然后我们就可以看到我们的项目打包好啦!

你可能感兴趣的:(前端框架,node.js,javascript,vue.js,webpack)