二.【Vue踩坑】vue的准备工作

webpack

1.X文档地址http://webpack.github.io/docs/

2.X文档地址https://webpack.js.org/

将webpack安装成为全局包 npm install webpack -g

在cmd中,调用webpack 指令给的两个参数,要答辩的文件路径,要输出的文件路径,例如 webpack main.js build.js

先安装node.js

然后检查node.js安装的情况以及版本号

npm -v

[站外图片上传中...(image-90cdc6-1526531830452)]

npm安装好之后,需要安装webpack.
考虑到国内的网速,我们先使用淘宝的cnpm包来替代 npm 包。所以在项目中,我们基本上使用cnpm包

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install webpack -g

下载完成,检查一下

webpack -v
image
cnom install

cnpm uninstall

cnpm init

-g 将我们的包安装成为我们的全局

创建一个main.js调用 calc.js中函数。之后使用webpack进行打包。
打包只需要对main.js进行打包即可,因为系统会自动将调用的js文件也一起打包
首先,先进入到文件存放的目录中

webpack <被打包的js文件名称> <打包生成的js文件名称>

webpack main.js build.js

[站外图片上传中...(image-2d9030-1526531830452)]


webpack.config.js这是webpack默认的配置文件,只需要在cmd上执行webpack就会自动去查找webpack.config.js中的内容进行相关的打包操作。

    modules.exports = {
    entry:'./main.js'//webpack要打包的原文件
    output:{
        filename:'build.js'//打包以后输出的文件名
    }
}

在cmd中打开目标文件目录

webpack
image

推荐阅读更多精彩内容