vue之webpack打包工具的使用

时间 2019-11-08

标签 vue webpack 打包工具使用繁體版

原文原文链接

vue之webpack打包工具的使用

1、什么是webpack?css

webpack是一个模块打包工具。
用vue项目来举例：浏览器它是只认识js，不认识vue的。而咱们写的代码后缀大可能是.vue的，在每一个.vue文件中均可能html、js、css甚至是图片资源；而且因为组件化，这些.vue文件之间还有错综复杂的关系。因此项目要被浏览器识别，咱们就要使用webpack将它们打包成js文件以及相应的资源文件。html

2、webpack的功能？vue

　　一、它能够把CSS，JS图片当作模块来处理webpack

　　二、它能够把以上的这些文件进行打包压缩成一个JS文件，减小了HTTP的请求web

　　三、根据模块之间的依赖关系进行分析，按需加载npm

　　四、能够安装一些插件，对插件进行打包处理浏览器

3、安装app

npm install webpack -g(全局的安装)

webpack -v #查看是否安装成功

打包的方式：工具

手动打包：组件化

 a.js
webpack a.js /test/a2.js

自动打包：

4、简单使用

这里咱们来理解下webpack是如何打包的

app/a.js

var tcl = "this is webpack test";
console.log(tcl);
require('style-loader!css-loader!./a.css');

执行命令

webpack app/a.js public/b.js    、//意思是吧app下的a.js打包在public下的b.js

就会自动生成一个b.js的文件，如今就可使用并导入了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        this is div test
    </div>
    <script src="bundle.js"></script>
</body>
</html>