运用webpack手动搭建项目结构

基本步骤

1、把项目中的最基本的文件和文件夹建立起来
    src : 项目的源代码目录
     |-- main.js 项目打包的入口文件
     |-- App.vue 项目启动之后看到的第一个组件(根组件)

    package.json: 项目的配置文件(用来装包的)
    webpack.develop.config.js 开发阶段时的配置文件

2、在我们浏览器中，看到一个Hello Vue

3、实现我们项目的所见及所得(更改项目的源代码，能在浏览器看到效果)

在我们浏览器中，看到一个Hello World

1、在App.vue template中写了 Hello Vue (注意要用根标签包裹)
    <template>
        <div>
            Hello World
        </div>
    </template>

2、在webpack.develop.config.js中配置入口文件和输出文件
    entry: './src/main.js', //项目打包的入口文件
    output: {
        path: __dirname,
        filename: 'bundle.js' //输出文件
    },

3、安装vue文件,在main.js中导入Vue,创建vue对象
    3.1 导入App.vue

    3.2 在我们的浏览器中要想看到App.vue中Hello Vue
        第一个.vue文件要被webpack打包，需要借助一个vue-loader的东西
        第二个，我们要想App.vue写的内容被浏览器识别，必须在入口文件中导入Vue

        vue:解析Vue指令和template标签
        vue-loader：加载和转译 Vue 组件
        vue-template-compiler style-loader css-loader 这几个都是vue-loader依赖的，所以必须安装，不        然报错

        安装输入指令:
        cnpm i vue --save
        cnpm i vue-loader vue-template-compiler style-loader css-loader --save-dev

3.3 在入口文件中导入vue(注意下render的作用)
        代码:import Vue from 'vue'
        创建一个根实例，里面要写两个属性
            new Vue({
                el: "#app", //把组件的内容放在id=app的div去显示
                render: function(createElement) { //决定把哪个组件挂在到id=app的div中去
                    return createElement(App);
                }
            })

4、配置loader
    在webpack.develop.config.js中配置vue-loader

    module: { //配置loader
        rules: [{
            test: /\.vue$/,
            use: [{
                loader: 'vue-loader' //使用vue-loader进行打包vue后缀文件
            }]
        }]
    }
 5.打包
    输入指令:webpack --config webpack.develop.config.js --progress

6、运行
    5.1 在项目根目录新建一个index.html
        id=app的div
    5.2 在index.html导入bundle.js

webpack-dev-server & webpack区别

相同点:
    都能对源代码打包，webpack-dev-server 很厉害，webpack能做的事，它都能做，并且还能做webpack不能做的事情，比如热更新
    webpack-dev-server & webpack 打包的指令和后面接的参数都是一样的 --progerss --config ...
    它们两个在打包的时候，都是全局包

不同点:
    wepack-dev-server 开发阶段使用，打包出来的东西放在浏览器内存中，运行速度特别快

    webpack 生产阶段使用，会在文件夹中生成一个bundle.js，这个文件最终是要和index.html最终一起发布到服务器上面去

插件:热更新,在修改代码后自动打包,并且在浏览器自动更新

安装插件:
指令: html-webpack-plugin
作用:
    它是以一个参照html为模版，在浏览器的内存中，生成一个index.html，并且自动给我们导入在内存中生成bundle.js
插件代码写在 webpack.develop.config.js中的plugins里面

使用步骤:
    1、安装html-webpack-plugin webpack webpack-dev-server
    指令:cnpm i html-webpack-plugin webpack webpack-dev-server --save-dev

    2、在项目的根目录下创建一个参照模板的html文件（template.html就是在服务器生成的index.html的模板）
       注意：参照文件只要写id=app的div即可，其它不要写

    3、在webpack.develop.config.js中的plugins中写代码
       见webpack.develop.config.js

       先导入文件:var HtmlWebpackPlugin = require('html-webpack-plugin') 
       plugins:[
        //根据参照template.html在浏览器内存中生成一个index.html
        new HtmlWebpackPlugin({
            template: './template.html', //参照文件
            filename: 'index.html'//在内存中生成的文件名称
        })
    ]

    4.安装全局包 webpack-dev-server 
    指令:npm webpack-dev-server -g
    代码写在终端,它能把我们的项目的源代码打包成bundle.js（放在浏览器内存中的）

    5.运行项目，在内存中生成bundle.js并且把bundle.js插入到index.html中,并且最后运行index.html

    在终端里面生成的指令：

    webpack-dev-server --progress --config webpack.develop.config.js --port 3008 --open --hot 

    这里要注意下这里打包的不是webpack而是webpack-dev-server,它是为了实现热更新的打包
    port 3008为打开的端口号
    open为设置自动打开