Webpack安装以及快速入门

  • 开发
  • 24

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 打包生成的输出文件，默认放到了项目根目录中，基于内存

阅读全部

相关推荐

  4. Webpack 开发快速入门

    2024-07-11 20:18:05       30 阅读

  7. OpenWrt安装快速入门指南

    2024-07-11 20:18:05       24 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-11 20:18:05       66 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-11 20:18:05       70 阅读

  9. 在Django里面运行非项目文件

    2024-07-11 20:18:05       57 阅读

  19. Python语言-面向对象

    2024-07-11 20:18:05       68 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-07-11 20:18:05       62 阅读

热门阅读

  3. Spring的bean的生命周期——bean的创建与销毁

    2024-07-11 20:18:05       21 阅读

  8. Nginx Bla~Bla~

    2024-07-11 20:18:05       18 阅读

  10. A133 Android10 root修改

    2024-07-11 20:18:05       20 阅读

  16. 雅思词汇及发音积累 2024.7.11

    2024-07-11 20:18:05       18 阅读

  22. hive add_months函数问题，相同sql时mr和spark查询结果不同

    2024-07-11 20:18:05       20 阅读

  26. OpenSNN推文：科技与设计前沿：2024年最新发现与创意设计

    2024-07-11 20:18:05       26 阅读

  28. Perl 语言入门很简单

    2024-07-11 20:18:05       20 阅读