乐趣区

webpack4手动搭建vue

jiezi

本文将介绍如何用 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

退出移动版