• webpack 使用与配置

    目录结构

    其中index.js为入口文件

    进入项目更目录

    cd webpack
    webpack ./src/index.js ./dist/bundle.js

    用webpack将项目打包为bundle.js

    index.js  是 js入口文件，info.js与main.js是js自定义库，通过module.exports导出变量与函数

    入口中使用require或import 导入

    index.js 是不能直接引入项目中的，module.exports 是无法识别的。需要通过webpack打包，才能使用，项目中引入的是打包好的文件（bundle.js）

     index.js

    1. // common.js 模块规范
    2. const{add,mul} = require('./main.js')
    3.  
    4. console.log(add(10,20))
    5. console.log(mul(10,20))
    6.  
    7. // 2.使用ES6模块规范
    8. import{name,age} from "./info.js"
    9. console.log(name)
    10. console.log(age)

    main.js

    1. function add(num1, num2){
    2. 	return num1 + num2
    3. }
    4.  
    5. function mul(num1, num2){
    6. 	return num1 * num2
    7. }
    8.  
    9. module.exports = {
    10. 	add,
    11. 	mul
    12. }

    info.js

    1. export const name = "lisa"
    2. export const age = 23

     index.html

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<h1>webpackh1>
    9. 		<script src="./dist/bundle.js">script>
    10. 	
    11. 	body>
    12. html>

    控制台 

     

     配置webpack.config.js

    根目录webpack.config.js

    配置好webpack.config.js后，在根目录 执行webpack即可打包，不需要webpack ./src/index.js ./dist/bundle.js  这么多命令，

    1. const path = require('path') // 引入path包（node中的包）
    2.  
    3. module.exports = {
    4. 	entry : "./src/index.js",//js 入口文件
    5. 	output : {  //出口
    6. 		path : path.resolve(__dirname,'dist'), //node中的函数__dirname 获取当前文件路径再与dist拼接
    7. 		filename : "bundle.js" // 打包生成的文件
    8. 	},
    9. 	
    10. }

    配置package.json

    package.json作用

    1. node_modules文件夹的问题

    1. 文件夹以及文件过多过碎，当我们将项目整体拷贝给别人的时候，传输速度会很慢很慢.

    2. 复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致， 否则会导致当前项目运行报错

    2. package.json文件的作用

    项目描述文件，记录了当前项目信息,例如项目名称、版本、作者、github地址、 当前项目依赖了哪些第三方模块等。 package.json文件在项目根目录下使用npm init -y命令生成。

    生成package.json

    npm init -y

    在传项目给用户时可以把node_modules文件删除，让用户在此项目根目录下输入命令：npm install，系统会查看dependencies（项目依赖的第三方模块）里面的内容，自动把包下载完，生成node_modules文件

  • 相关阅读:
    Maven学习笔记
    前端自动生成二维码并长按识别跳转 Vue
    Docker+nginx部署Springboot+vue前后端分离项目（Linux版）
    基于Spring Boot的医院预约挂号系统设计与实现(源码+lw+部署文档+讲解等)
    java对象以及引用方式
    一文熟悉 Go 的分支结构(if - else-if - else、switch)
    leetcode-09（下一个排列+快乐数+全排列）
    android junit 单元测试与输出日志信息查看处理
    从零开始的力扣刷题记录-第八十九天
    Lua使用方式介绍
  • 原文地址：https://blog.csdn.net/qq_43035350/article/details/126697313