today

1.报错：

 Cannot find module '@babel/core'

babel 版本问题，下载时带上版本号

2

关于为什么要使用 webpack ,

Webpack是一个前端打包工具，前端代码为什么要打包呢？因为单页应用程序中用到很多素材，如果每一个素材都通过在HTML中以src属性或者link来引入，那么请求一个页面的时候，可能浏览器就要发起十多次请求，往往请求的这些资源都是一些脚本代码或者很小的图片，这些资源本身才几k，下载连1秒都不需要，但是由于HTTP是应用层协议，它的下层是TCP这个运输层协议，TCP的握手和挥手过程消耗的时间可能比下载资源本身还要长，所以需要把这些小文件全部打包成一个文件，这样只要一次TCP握手和挥手的过程，就把多个资源给下载下来了，并且多个资源由于都是共享一个HTTP请求，所以head等部分也是共享的，相当于形成了规模效应，让网页展现更快，用户体验更好。

而且

webpacker 中的 loader  可以 吧es6转化为浏览器 可识别 的es5 ，吧sass，less 等编译成css

像浏览器自动刷新 热加载 这个代码也是webpack 通过插件来实现的

3.npm 和 node.js 

npm 是node.js的包管理工具 ，更加方便地引入本地库

4.构建项目的时候

npm版本高于5.2.0 可以 直接用这个命令

npx webpack --config webpack.config.js

5.安装 vuecli ,这个要看官网最新的, 之前下的 先卸载再下载最新的

vue-style-loader是由vue官方维护的你也可以使用其他的loader来处理css,他除了提供了常见的插入样式到html的功能以外还提供了其他的功能,例如热更新样式等.

6在webpack 配置 vue

7.使用插件

如果你将我们的内容放到一个服务器上运行,你会很容易发现一个问题.

就是缓存,web上的资源浏览器会对其进行缓存,但是对开发的时候,或者产品中的代码更新十分不友好,新的代码不会得到及时的使用.

我们让资源每次的名字不一样就可以简单的解决这个问题,接下来修改我们的webpack.config.js:

output:{
        filename:'[name].[hash].js',
        path:pathJoin(__dirname,'./dist')
    }

html-webpack-plugin

这个插件可以自动生成一个html文件,并且将资源文件按照正确顺序插入到html中.

这个插件要放到插件数组的第一个

在dist目录下会有index.html文件,而我们打包后的index.js的输出文件名也变成了app.XXXXXXXXXXXXXXXX.js的格式,更加神奇的是在index.html中自动插入了script标签来引用打包后的js文件.

使用CleanWebpackPlugin插件

现在无论运行几次构建dist目录下都是干净的.

mini-css-extract-plugin.

运行我们的项目,现在dist目录下已经有一个style.css的文件了,而且htmlwebpackplugin自动将style.css插入到了index.html中.

将vue单文件中的css提取出来到一个单独的css文件中.

vue 的路由配置

<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

在这里显示 路由内容

<router-view></router-view>

js:

构造模板

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

构造路径

const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
]

创建路由实例

const router = new VueRouter({
    routes
})

创建app 实例

const app = new Vue({
    router
}).$mount('#app')

pain

虽然跟着配置了一大堆东西,但是还是不清楚 这个webpack 到底怎么使用...

tomorrow

1.写ppt

2.继续vue