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