common.js引入html,webpack知识，在html里通过webpack使用commonJS规范，可以require各种包...

1.任务：

点击按钮alert("你好");

代码用jQuery来做，这里的jQuery不是传统的  ，而是在require("jquery");

2.准备工作

2.0 新建一个demo文件夹，然后在该文件夹里操作;

2.1 npm init (一直enter) ;

2.2 npm install webpack --save

2.3 npm install jquery --save

3.新建文件

文件目录如下：

详细说明各个文件，

index.html文件的内容：

按钮

//bundle.js是webpack编译之后的自动生成的文件

index.js的内容：

var $ = require('jquery') ;

$('button').click(function(){

alert('你好！') ;

})

package.json的内容：

先npm init 之后不停的enter 。之后npm install jquery  npm install webpack的时候会自动加入到包依赖中

{

"name": "02",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "",

"license": "ISC",

"dependencies": {

"jquery": "^3.0.0",

"webpack": "^1.13.1"

}

}

webpack.config.js的内容：

module.exports = {

//入口文件

entry:'./index.js',

output:{

//编译之后的文件放到当前目录并且命名为bundle.js

path:__dirname,

filename:'bundle.js'

}

}

在当前目录下打开命令台输入webpack . 出现如下内容

文件夹里自动出现bundle.js

在浏览器里打开index.html文件，点击“按钮”