vue模块化，webpack的使用

最新推荐文章于 2022-06-01 16:41:06 发布

码农77号

最新推荐文章于 2022-06-01 16:41:06 发布

阅读量99

点赞数

分类专栏：笔记文章标签： npm nodejs

本文链接：https://blog.csdn.net/weixin_47373456/article/details/119331790

版权

笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

先搞清楚node、npm和webpack之间的关系.

Node.js ：是一个基于Chrome JavaScript 运行时建立的一个平台.

npm：包管理工具，是于Node社区中产生的，是node.js的官方包管理工具，下载安装好node的时候，npm就自动安装好了.

webpack：是一个模块化打包工具，是npm生态中的一个模块，可以通过全局或局部安装webpack来使用webpack对项目文件进行打包；运行必须依赖于node的环境，没有node是不能打包的，但是webpack打包后的项目本身只是前端静态资源和后台没有关系，也就是说不依赖与node，只要有后台能力的都可以部署项目。

安装好node后，使用npm工具对webpack安装
全局安装：
在这里插入图片描述
当前项目局部安装（开发时依赖）：

下面用简单代码演示

normmal.css

body  {
  background-color:red;
}

mainUtils.js

function add(num1,num2){
  return num1+num2
}
function mul(num1,num2){
  return num1*num2
}
//commonjs规范导出
module.exports = {
  add,
  mul
}

info.js

//es6规范导出
export const name ='zzc'
export const age =22
export const height =175

main.js

//使用commonjs的模块化的规范导入
const {add,mul} =require('./js/mathUtils.js')
console.log(add(10, 20));
console.log(mul(10, 20));
//使用es6的模块化的规范导入
import {name,age,height} from "./js/info";
console.log(name);
console.log(age);
console.log(height);
//依赖css文件
require('./css/normal.css')

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>webpack使用</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>

当前项目目录：
在这里插入图片描述
dist文件夹：用于存放之后打包的文件
src文件夹：存放自己写的源文件，main.js是项目入口文件
index.html：浏览器打开展示的首页html
package.json：通过npm init生成，npm包管理的文件，该文件主要是配置build：webpack指令
在这里插入图片描述

package-lock.json：通过npm install生成
在这里插入图片描述
node_modules：通过局部安装webpack生成
语句在上面

webpack.config.js：
该文件属于重要配置文件，用来引导打包入口到出口

//将main.js打包到bundle.js
const path = require('path')  //用到node的npm init --> npm install
module.exports={
  entry:'./src/main.js',  //入口
  output:{   //出口
    path:path.resolve(__dirname,'dist'),  //动态获取出口目标绝对路径
    filename:'bundle.js'  //出口目标文件名
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        //css-loader只负责将css文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader时，执行是从右到左
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

当依赖于样式css时候，要用：
指令npm install --save-dev css-loader安装css-loader
指令npm install style-loader --save-dev安装style-loader
我当时安装后进行打包时出现了错误，说什么什么不是一个方法
在这里插入图片描述
当时上网看了某个博主的解释，发现是版本问题，下面版本亲试可用

执行build指令打包在这里插入图片描述
执行index.html后效果图：

码农77号

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue模块化，webpack的使用

先搞清楚node、npm和webpack之间的关系.Node.js ：是一个基于Chrome JavaScript 运行时建立的一个平台.npm：包管理工具，是于Node社区中产生的，是node.js的官方包管理工具，下载安装好node的时候，npm就自动安装好了.webpack：是一个模块化打包工具，是npm生态中的一个模块，可以通过全局或局部安装webpack来使用webpack对项目文件进行打包；运行必须依赖于node的环境，没有node是不能打包的，但是webpack打包后的项目本身只是前端静
复制链接

扫一扫