Webpack

作用：

import Header from './header';
import Sidebar from './sidebar';
import Content from './content';


var dom = document.getElementById('root');


new Header();
new Sidebar();
new Content();

index.html里只引入了一个js文件。所以他的网页运行速度会很快。第二点，文件和文件之间的依赖关系非常的明确。上面的文件颠倒顺序也不要紧，因为确保了下面引用之前，前面都加载好了。这种引入方式就叫做ES Moudle模块引入方式，跟react,vue里面非常像。

以前写vue，react都能用啊，在这里怎么就报错了呢？其实是这样的，在浏览器里，压根就不认识这样的语句，所以我们想实现我们的代码，目前来看，根据是不可能的。这个时候，webpack就登场了。虽然原生浏览器不知道import是什么意思。但是我webpack知道。webpack知道import是引入模块的意思。他可以帮浏览器做一个翻译，告诉浏览器，这其实在引入一个模块。

命令

npm init -y

npm i -D webpack@v4.35.2

npm i -D webpack-cli@3.3.6

打包 CSS 资源
npm install --save-dev style-loader css-loader

打包 Images 资源
npm install --save-dev file-loader

使用 HtmlWebpackPlugin 插件
npm install --save-dev html-webpack-plugin

实时重新加载
npm install --save-dev webpack-dev-server

Babel 浏览器兼容性
npm install -D babel-loader @babel/core @babel/preset-env

打包 Vue 基本配置
npm install -D vue-loader vue-template-compiler
修改 webpack.config.js 配置

template:定义组件的视图模板;引用components 内容

// template 实质上没有编译和渲染功能，而当前编译功能可以直接采用 vue-loader进行编译，
// 而渲染功能实质上是通过render函数 来进行渲染组件，所以只需要在此处指定 render渲染组件即可