【Webpack】webpack安装与js文件的模块化处理

最新推荐文章于 2023-04-15 10:40:54 发布

专砖儿

最新推荐文章于 2023-04-15 10:40:54 发布

阅读量686

点赞数

分类专栏：技能文章标签： webpack npm 模块化前端

本文链接：https://blog.csdn.net/weixin_40921421/article/details/122014793

版权

技能专栏收录该内容

20 篇文章 1 订阅

订阅专栏

webpack——前端模块化的打包工具（概念 | webpack 中文文档）。webpack需要基于node环境才能使用，npm可通过node自动安装。其中，npm是一个包管理工具。

（一）webpack的安装

先安装node+npm，最后通过npm命令安装webpack。

注：查看node、npm、webpack版本的命令——node -v、npm -v 、webpack -v

1.全局安装。 webpack 和 webpack-cli。原因：由于webpack4后的版本，命令迁移至webpack-cli，因此还需安装webpack-cli。

npm install webpack webpack-cli –g

webpack未安装状态与安装命令

2.局部安装。本地创建空文件夹myTest并定位（通过cd命令）。在myTest文件夹下，本地安装webpack。

npm install webpack webpack-cli --save-dev

本地文件下局部安装webpack

注：若使用vscode打开terminal窗口报错时，可参见《 VSCode无法正常启动Terminal窗口》。

3.查看webpack是否安装成功。

webpack -v

（二）webpack的使用——js文件

当webpack安装成功后，

会在myTest文件夹下自动生成package-lock.json、node_modules文件。

1.输入命令（如下）对myTest项目进行初始化。初始化的过程可以根据Terminal终端窗口提示的信息补充。结束后，会自动生成 package.json文件。其中，package.json文件是包管理配置文件。

npm init

npm init命令后生成package.json文件

2.在myTest文件夹下，新建src文件夹，并新建js子文件夹和index.js文件，用于存放源代码。其中，index.js文件作为等待打包的文件，一般放在src文件夹下即可。在index.js中写下简单的打印输出代码（如下），以备测试。

console.log("888");

3.在myTest文件夹下，新建空dist文件夹，用于存放打包后自动生成的.js文件（暂定js文件的名称为bundle.js）。

4.在myTest文件夹下，新建index.html文件。在html中引入bundle.js文件（如下）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpackTest</title>
</head>
<body>
</body>
<script src="./dist/bundle.js"></script> 
</html>

5.在myTest文件夹下，新建webpack.config.js,打开后添加代码如下。

const path=require('path'); //调用node.js中的路径
module.exports={
    entry:'./src/index.js', //入口文件，需要打包的文件
    output:{
        filename:'bundle.js',    //输入的文件名是bundle.js，生成的文件名也是bundle.js
        path:path.resolve(__dirname,'./dist') //指定生成的文件目录，其中__dirname指运行时的当前路径
    },
    mode:"development"    //开发模式，没有对js等文件压缩，默认生成的是压缩文件
}

6.运行webpack进行打包。输入命令（如下），运行成功后，会在dist文件夹中自动生成打包好的bundle.js文件。

webpack --config webpack.config.js
或
webpack

webpack打包命令

7.观察index.html是否正确输出index.js中的结果。其中，index.js打包后，index.html文件下能正常输出index.js中的结果。

index.js打包后index.html文件下能正常输出index.js中的结果

（三）简化打包的命令

命令 npm run dev，相当于命令 webpack --config webpack.config.js。

1.package.json文件添加配置后（如下）。

  "dev": "webpack --config webpack.config.js"
或
  "dev": "webpack"

webpack打包命令的简写

2.使用命令（如下）对index.js文件直接打包。

npm run dev

执行webpack简写命令

（四）js文件的模块化处理

假设，index.js调用了另一个mathMethod.js中的方法、常量、变量。参考教学视频《最全最新Vue、Vuejs教程，从入门到精通》。

方式一：commonjs的模块化规范

mathMethod.js中的导出：

function add(a,b){
    return a+b;
}
const num1=10;
let num2='&&';

module.exports={
  add,
  num1,
  num2
}

index.js中的导入：

const {add,num1,num2}=require('./mathCompute.js'); //方法导入

// 输出
console.log('88888');
console.log('66666');
console.log(add(6,8));
console.log(num1);
console.log(num2);

方式二：ES6的模块化规范

mathMethod.js中的导出：

export function add(a,b){
  return a*b;
}
export const num1=20;
export let num2='&%&';

index.js中的导入：

 import {add,num1,num2} from "./mathCompute.js"

// 输出
console.log('88888');
console.log('66666');
console.log(add(6,8));
console.log(num1);
console.log(num2);