Webpack安装以及快速入门

发布于:2024-07-11 ⋅ 阅读:(23) ⋅ 点赞:(0)

3 Webpack

1 什么是Webpack

https://webpack.js.org/ (官网)

webpack 是一个现代 javascript 应用程序的 静态模块打包器 (module bundler)

待会要学的 vue-cli 脚手架环境, 集成了 webpack, 所以才能对各类文件进行打包处理

在这里插入图片描述

webpack是一个 静态模块 打包器,可以做以下的这些工作

  1. 语法转换(主要是浏览器兼容)

    • less/sass转换成css
    • ES6转换成ES5
  2. html/css/js 代码压缩合并 (打包)

  3. webpack可以在开发期间提供一个开发服务器

可以把它看成maven中工程自动化那部分(jar) ,前端项目也是先打包再上线

2 Webpack安装

全局安装

cnpm install webpack@4.41.5 -g
cnpm install webpack-cli@3.3.12 -g

安装后查看版本号

webpack -v
webpack-cli -v

3 快速入门 (js打包)

方式一:webpack原始方式

(1)新建文件夹 work3,在创建src文件夹,创建 bar.js

exports.info=function(str){
   document.write(str);
}

(2)src下创建logic.js

exports.add=function(a,b){
	return a+b;
}

(3)src下创建main.js

var bar= require('./bar');
var logic= require('./logic');
bar.info( 'Hello world!'+ logic.add(100,200));

说明:上述具有多个js文件,那么我们在实际开发中使用的时候会导入过多的js文件,使用起来不方便,那么我们可以将上述多个js文件打包成一个js文件。

(4)创建配置文件webpack.config.js ,该文件与src处于同级目录

var path = require("path"); // 导入 node.js 中专门操作路径的模块,固定写法
//执行webpack命令的时候会读取到module.exports中的内容
module.exports = {
    //执行webpack命令的时候,读取入口main.js,由于main.js关联bar.js和logic.js,所以会将这三个js文件合并到一个js文件中
	entry: './src/main.js', // 打包入口文件的路径
    //输出文件位置
	output: {
        //__dirname表示当前工程目录
		path: path.resolve(__dirname, './dist'),  // 输出文件的存放路径
		filename: 'bundle.js'  // 输出文件的名称
	}
};

以上代码的意思是:读取当前目录下src文件夹中的main.js(入口文件)内容,把对应的js文件打包,打包后的文件放入当前目录的dist文件夹下,打包后的js文件名为bundle.js

webpack 的 4.x 版本中默认约定:

  • 打包的入口文件为 src -> main.js
  • 打包的输出文件为 dist -> index.js

(5)执行编译命令

webpack

执行后查看bundle.js 会发现里面包含了上面两个js文件的内容

(6)创建index.html ,引用bundle.js

<!doctype html>
<html>
  <head>  
  </head>
  <body>   
    <script src="dist/bundle.js"></script>
  </body>
</html>`

创建完毕,完整目录如下

在这里插入图片描述

测试调用index.html,会发现有内容输出:Hello world!300

方式二:基于NPM方式

  1. 新建项目空白目录,并运行npm init –y 命令,初始化包管理配置文件package.json

    -y 可以直接跳过配置

    在这里插入图片描述

  2. 新建 src 源代码目录,并且把 bar.js 和 logic.js 和 main.js 文件复制到 src目录

  3. 创建index.html ,引用bundle.js

    <!doctype html>
    <html>
      <head>  
      </head>
      <body>   
        <script src="dist/bundle.js"></script>
      </body>
    </html>
    
  4. 运行 npm install webpack webpack-cli 命令,安装webpack相关的包

    如果全局安装过webpack 和 webpack-cli工具, 此步骤可跳过

  5. 在项目根目录中,创建名为webpack.config.js 的 webpack配置文件同上

    var path = require("path");
    module.exports = {
    	mode: 'development', // mode 用来指定构建模式development、production
    	entry: './src/main.js',
    	output: {
    		path: path.resolve(__dirname, './dist'),
    		filename: 'bundle.js'
    	}
    };
    

    mode: ‘development’ //mode 用来指定构建模式、production:生产模式(压缩)

  6. 在 package.json 配置文件中的scripts节点下,新增dev脚本如下:

    {
      "name": "work4",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack"  //script 节点下的脚本,可以通过 npm run 执行
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }
    
    

    完整代码结构:

    在这里插入图片描述

    在终端中运行 npm run dev 命令,启动webpack进行项目打包。

    在这里插入图片描述

    注意是在package.json 包下运行该命令

    点击index.html文件查看结果, 会发现有内容输出:`Hello world!300

    说明:使用npm命令运行的原因是后期使用webpack命令的时候,命令会很多,不仅仅只有webpack几个字母,不好记,而使用:npm run dev命令执行无论webpack命令有多少都会执行。

4 webpack-dev-server 开发服务器

4.1 介绍

修改main.js代码如下:

在这里插入图片描述

需要每次在修改源码之前需要重新打包:

在这里插入图片描述

每次修改代码, 都需要重新打包, 才能看到最新的效果, 且实际工作中, 打包非常费时 (30s - 60s) 之间

为什么费时?

  1. 构建依赖
  2. 读取对应的文件, 才能加载
  3. 用对应的 loader 进行处理
  4. 将处理完的内容, 写入到 dist 目录

简而言之就是我们希望修改源码完毕之后,不用再每次重新打包,运行的结果直接是修改后的结果。

解决方案:我们可以开启一个开发服务器webpack-dev-server, 在电脑内存中打包, 缓存一些已经打包过的内容, 只重新打包修改的文件 (热更新)

4.2 使用

如果模块(work3)下,没有package.json 文件,那么需要在模块下初始化命令:npm init即可

  1. 修改 package.json -> scripts 中的 dev, dependencies, devDependencies如下:

    devDependencies这是开发时依赖, 上线不依赖

{
  "name": "work4",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.12"
  },
  "devDependencies": { 
    "webpack-dev-server": "^3.11.2"
  }
}

然后运行 cnpm install 指令,安装webpack,webpack-cli 和 webpack-dev-server

  1. 修改 webpack.config.js 文件,添加 devServer
var path = require("path");
module.exports = {
	mode: 'development', // mode 用来指定构建模式development、production
	entry: './src/main.js',
	devServer: {
		port: 8099,// 服务器占用8099端口
		open: true  // 自动打开浏览器
	},
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: 'bundle.js'
	}
};
  1. 删除之前的dist目录

  2. 将 index.html 中,script 脚本的引用路径

    <!doctype html>
    <html>
      <head>  
      </head>
      <body>   
        <!-- 内存中读取 -->
        <script src="/bundle.js"></script>
      </body>
    </html>
    
  3. 运行 npm run dev 命令

  4. 在浏览器中访问 http://localhost:8099地址,查看自动打包效果

webpack-dev-server 会启动一个实时打包的 http 服务器

webpack-dev-server 打包生成的输出文件,默认放到了项目根目录中,基于内存