webpack的下载和使用使用

webpack的下载

打开cmd,检查是否有node环境，只有有node环境才能下载

然后下载 输入 npm install webpack@3.6.0 -g(全局安装)

等待下载就好了

webpack的使用

首先先生成几个文件

首先让webpack编译common.js的代码
在mathfun先简单写几行common.js的代码

var add=function(a,b){
    return a+b;
}
var ride=function(c,d){
    return c*d;
}
module.exports={
    add,ride
}

用module.exports导出函数或者变量然后子啊main.js引出来

const{add,ride }=require('./mathfun.js')
console.log(add(20,20));
console.log(ride(20,21));

然后我们打开终端(注意打开终端的位置)

要在在外面的位置和打开终端然后我们一点一点进入文件中

在最外部打开终端是新建文件夹的终端，然后在终端输入cd study（cd空格加文件名）进入目的文件夹就行了，如果一次进不去就在输入cd空格加文件名知道进去为止

进去之后输入 webpack ./src/mian.js ./dist/bundle.js
webpack+要编译的js文件的路径*+安置bundle.js的路径
dist就混出现bundle.js

在main.js中引入mathfun.js的路径所以不要担心其他有关的js文件编译不到

最后在index.html中引入bundle.js就大功告成了


同样的es6也可以这么做
mathfun.js中

const name="web";
const age =20;
export{
    name,
    age
}

main.js

import{name,age} from"./mathfun.js";
console.log(name);
console.log(age);

每次改变内容都要重新在终端输入webpack ./src/main.js ./dist/bundle.js