webpack 搭建vue-cli

# weback 搭建vue-cli

### 创建项目

* npm init 创建package.json,里面包含项目信息

* npm install webpack webpack-cli --save-dev

### 创建vue项目相关内容

* 创建src文件夹

* 在src中创建 main.js 和 App.vue

* 下载 vue 模块

* 书写 main.js 文件内容

```

import Vue from 'vue'

import App from './App.vue'

import './assets/logo.png'

new Vue({

    render:h=>h(App)

}).$mount('#app');

```

* 书写 App.vue 的内容

```

<template>

    <div id="app">

        <h1>共克时艰</h1>

    </div>

</template>

```

## 配置 webpack.config.js

### 安装vue相关laoder

* 安装 vue-loader和 vue-template-compiler

* npm install -D vue-loader vue-template-compiler

vue-loader 需要在module属性中设置，vue-template-compiler 不需要进行任何操作，只要安装成功，在使用vue-loader的时候就会自动执行vue-template-compiler的功能

* vue-loader 用来加载 vue文件，使文件支持vue语法

* vue-template-compiler 用来加载vue文件中的视图部分的内容

```

    const { VueLoaderPlugin } = require('vue-loader');

 plugins:[

        // 引入 vue-loader 插件

        new VueLoaderPlugin()

    ],

     module:{

        rules:[

            // 设置解析 vue 文件的模块，loader

            {

                test:/\.vue$/,

                loader:'vue-loader'

            }

        ]

     }

```

### 配置基本的内容

* 配置 文件入口 entry

* 配置文件出口 output

```

output:{

    path:path.resolve(__dirname,'dist'),

    filename:'main.js',

    // 清空路径中的内容，在生成文件之前清空 output 目录

    clean:true

},

```

* 显示html内容需要使用 html-webpack-plugin 插件

```

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

 new HtmlWebpackPlugin({

        template:'./public/index.html',

        title:'我的项目',

        minify:{

            removeAttributeQuotes:true,

            // collapseWhitespace:true

        },

        inject:'body'

    })

```

* 调用css 需要加载 css-loader style-loader sass-loader

* npm install sass css-loader style-loader sass-loader -D

```

    //module 中设置

    {

        test:/\.(css|sass)$/,

        use:['style-loader','css-loader','sass-loader']

    }

```

* 显示图片，需要使用 url-loader file-loader html-loader

* npm install url-loader file-loader html-loader -D

```

    //在js文件中(包括vue文件的js部分)

    import './assets/logo.png'

    // module属性中

    {

        test:/\.(png|jpg|gif)$/,

        use:[{

            loader:'url-loader',

            options:{

                esModule:false

            }

        }]

    },

    {

        test:/\.html$/,

        loader:'html-loader'

    }

```