webpack之webpack.config.js以及nodejs与es6导入导入语法

最新推荐文章于 2024-01-03 00:15:00 发布

原创最新推荐文章于 2024-01-03 00:15:00 发布 · 1.8k 阅读

CC 4.0 BY-SA版权

本文介绍了如何创建webpack.config.js配置文件，理解package.json的配置，并通过npm run build进行打包。接着对比了ES6和CommonJS的导入导出语法，包括变量、函数、默认值的导出与导入方式，以及它们之间的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1､创建webpack.config.js配置：

module.exports = {
  entry: {
    index:__dirname +"/src/main.js"
  },
  output:{
    path:__dirname+"/dist",
    // filename:"index.js"
    filename:"[name].js"
    // name表示和入口文件key名:index一致
  },
  watch:true
  // 启用 Watch 模式。这意味着在初始构建之后，webpack 将继续监听任何已解析文件的更改。Watch 模式默认关闭。
}

2､package.json配置

  "scripts": {
    "build": "webpack"

  },

3､npm run build

——————————————————————————

1、ex6与commonjs写法比较

导出

exports.myvar = "hello"等同于

es6的 export var myvar = "hello"

函数

exports.add = function add(){}等同于

export function add(){}

2､导入

const {myvar} = require("./xxx");----- import {myvar} from "./xxx";

const {add} = require("./xxx); ----- import {add} from "./xxx"

es6还可以写import {myvar,add} from "./xxx"

3､默认值default commonjs的导入不兼容es6的导出。需要加.default

默认的不需要写{}

导出

export default "other";

------

导入

// import v from "./other";

const v =require("./other").default;

// nodejs的require写法需要后面加上.defult才等同于 es6的写法。

// nodejs的导入不兼容es6的导出默认值

如果

导出用 module.exports = "nodejs other";

则导入直接const v =require("./other")；或mport v from "./other";

es6可兼容commonjs的导出。

4､default 函数

函数

module.exports = function (){}----export default function(){}

const fn = require("./xxx")----import fn from "./xxx"