Git Product home page Git Product logo

webpackproject's Introduction

一个学习webpack的简单例子

因为webpack会使用到CommonJS规范首先介绍一下CommonJS规范

CommonJS规范规定一个文件就是一个模块,CommonJS规范需要node.js环境支持
目的是弥补JavaScript没有标准的缺陷,已达到像Python、Ruby和Java那样具备开发大型应用的基础能力
CommonJS模块规范主要分为三部分:模块引用、模块定义、模块标识。

模块引用

var Math=require('math');

模块定义

module对象:在每一个模块中,module对象代表该模块自身。 export属性:module对象的一个属性,它向外提供接口。 假设add.js中的代码如下

function add(num1,num2){
    alert(num1+num2);
}

a.js已经引用了该模块,但是仍然无法使用它
add.js中的函数要能被其他模块使用,就需要暴露一个对外的接口,export属性用于完成这一工作。将add.js中代码改为如下:

exports.add=function (num1,num2){
    alert(num1+num2);
}

a.js文件就可以正常调用add.js中的方法,例如

add.add(3,5)

这样的调用能够正常执行,前一个add意为本文件中add变量代表的模块,后一个add是引入模块的add方法。

模块标识

模块标识指的是传递给require方法的参数,必须是符合小驼峰命名的字符串,或者以 . 、..开头的相对路径,或者绝对路径。

通过配置文件来使用Webpack

  • 在项目根目录建一个名为webpack.config.js的文件 其中写入如下所示的简单配置代码
module.exports = {
  entry:  __dirname + "/app/main.js",//唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}
  • 打包文件 在当前项目下打开命令行,通过使用命令webpack进行打包

package.json

  • scripts字段是一个对象:每个属性对应一段脚本命令
    比如:
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"
  },

start命令对应的脚本是webpack 命令行下使用npm run start命令,就可以执行这段脚本,进行打包

webpackproject's People

Contributors

skycrumbing avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.