今天完成的事情：

1.继续学习webpack

明天计划的事情：

1.继续学习webpack

2.推进任务

遇到的问题和收获：

1.template和el的区别。

开发中的index.html并不会经常改动。需要定义出template

template的内容会被替换到所绑定id的div。即同时有el和template，el会被替换掉。

但这样写后续vue实例template内东西会越来越多，所以可以在外部声明一个组件，main.js写上template和data（）

const App = {
    template: `
    <div id="app">
        <h2>{{msg}}</h2>
         <button>按钮</button>
     </div>`,
    data() {
        return {
            msg: 'Hello vue'
        }
    }
};

在vue实例中用compoents注册这个组件App，再在template里调用。

就是template里面用了components里声明的组件。

new Vue({
    el: '#app',
    template: '<App/>',
    components: {
        App
    }
});

这里<App/>不需要包含在div里面，因为此处只有它一个，且这个<App/>调用时会覆盖掉。

继续优化，进行组件化。新建一个App.vue格式的文件，其中默认格式如下：

<template>
</template>

<script>
</script>

<style scoped>
</style>

这样就可以在里面写出模板和样式了，进行了分离。

将之前template里面的代码复制进来。

在main.js里引用它。

import App from './vue/App.vue'

尝试运行，会报错。因为.vue文件也很特殊，所以还需要配置对应的loader。

npm install vue-loader vue-template-compiler --save-dev

安装到两个东西，vue-loader用于加载vue，vue-template-compiler用于对vue的编译。

运行会报错，版本不匹配。

npm install vue-loader@13.0.0 vue-template-compiler@2.5.21 --save-dev

重新运行，把vue-template-compiler版本改成和vue一样，vue-loader版本改成13.0.0。

还可以再建立一个组件进行引用，在App.vue里用import引用，且export default里面注册components组件，在template里面引用一下该组件即可。

步骤是导出，注册再引用。App.vue是根组件，它里面还会引用其它的组件，形成一个树状结构。

<script>
    import Cpn from "./Cpn.vue";

    export default {
        name: "App",
        components:{
        Cpn
        },
        data() {
            return {
                msg: 'Hello vue'
            }
        }
    }
</script>

还有一个关于简写的，比如直接App而不用写App.vue。

可以在webpack.config.js下的resolve下写一个extensions属性，这样写的含义就是以后以.js，.css，.vue结尾的文件都不用写明后缀名了。

resolve: {
extensions:['.js','.css','.vue'],

plugin

即插件，用于现有架构扩展功能。Webpack中会对webpack现有功能进行扩展，比如打包优化，文件压缩。

和loader的区别

·loader主要用于转换某些类型的模块，它是一个转换器。

·plugin是插件，是对webpack本身的扩展，它是一个扩展器。

版权plugin

const webpack = require('webpack');

再在modele.exports里

plugins: [
    new webpack.BannerPlugin('最终版权归XX所有')
],

安装打包html的plugin，作用是打包时把index.html打包到dist文件夹里。

npm install html-webpack-plugin --save-dev

然后在webpack.config.js里修改配置，先引入配置

const HtmlWebpackPlugin = require('html-webpack-plugin');

再在plugin里写入

plugins: [
    new webpack.BannerPlugin('最终版权归XX所有'),
    new HtmlWebpackPlugin({
        template: 'index.html'
    })
],

这样index.html文件就会出现在dist文件夹，不过这样的话之前配置的在url里自动补上dist/就应该取消掉了，因为路径变更，所以不需要了。

template:’index.html’，是为了让在dist里生成的index.html参照外部的index.html模板进行生成

压缩的plugin

为了开发之后的方便，需要对打包的js文件进行压缩。uglify（丑化）

npm install uglifyjs-webpack-plugin@1.1.1 –save-dev

（这里是为了和脚手架2进行同步，写版本1.1.1）

const UglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin');

声明之后在plugins里创建即可。不过这个和版权的插件不会同时使用。

plugins: [
    new webpack.BannerPlugin('最终版权归XX所有'),
    new HtmlWebpackPlugin({
        template: 'index.html'
    }),
    new UglifyjsWebpackPlugin()
],

一些东西反复报错，虽然解决了，但很头疼。