webpack4手动搭建vue

本文将介绍如何用webpack4搭建一个vue的项目，webpack基本语法这里不做介绍，有问题可以参考webpack中文文档

1.创建一个文件夹，我们暂且称为webpackTest,打开终端，并进入到改文件目录下，初始化npm 项目, 这一步执行完会出现一个package.json的文件

npm init

2.安装所需要的依赖：webpack vue vue-loader css-loader vue-template-compiler

npm install webpack vue vue-loader css-loader vue-template-compiler

3.创建文件夹src,并在里面创建两个文件App.vue和index.js
3.1 src/App.vue下的代码为

    <template>
        <div id="app">{{text}}</div>
    </template>
    
    <script>
    export default {
        data () {
                return {
                    text: "hello word"
                }
            }
        }
    </script>

3.2 src/index.js下的代码为

    import Vue from 'vue';
    import App from './App.vue';
    
    const root = document.createElement('div');
    document.body.appendChild(root);
    
    new Vue({
        render : (h) => h(App)
    }).$mount(root)

4.安装HtmlWebpackPlugin，该插件可自定生成index.html，也可以自定义html模板，想了解更多查看HtmlWebpackPlugin

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

5.新建webpack.config.js，代码如下

   const path = require('path')
// 新加入 VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          },{
              test: /\.css$/,
              loader: 'css-loader'
          }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin()
    ]
}

6.在package.js > script下添加代码如下：

"build": "webpack --config webpack.config.js"

执行npm run build,提示安装webpack-cli，输入yes，打包成功后，在dist下生成了bundle.js和index.html,用浏览器打开index.html，浏览器输出hello word
7.使用webpack-dev-server 搭建一个简单的 web 服务器，能够实时重新加载(live reloading)。让我们设置以下：

npm install --save-dev webpack-dev-server

7.1修改配置文件webpack.config.js，告诉开发服务器(dev server)，在哪里查找文件，修改后的代码如下：

    const path = require('path')
    // 加入 VueLoaderPlugin
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
        entry: path.join(__dirname, 'src/index.js'),
        output: {
            filename: 'bundle.js',
            path: path.join(__dirname, 'dist')
        },
        //新添加代码
        devServer: {
            contentBase: './dist'
        },
        module: {
            rules: [
              {
                test: /\.vue$/,
                loader: 'vue-loader'
              },{
                  test: /\.css$/,
                  loader: 'css-loader'
              }
            ]
        },
        plugins: [
            new VueLoaderPlugin(),
            new HtmlWebpackPlugin()
        ]
    }

7.2在package.json，添加"start": "webpack-dev-server --open",如下

我们可以在命令行中运行 npm start，就会看到浏览器自动加载页面，并输出hello word，修改App.vue的text的变量为“hello word123”，保存更改，可见浏览器页面马上更新为hello word123

使用 webpack-dev-server