本文将介绍如何用webpack4搭建一个vue的项目,webpack基本语法这里不做介绍,有问题可以参考webpack中文文档
1.创建一个文件夹,我们暂且称为webpackTest,打开终端,并进入到改文件目录下,初始化npm 项目, 这一步执行完会出现一个package.json的文件
npm init2.安装所需要的依赖:webpack vue vue-loader css-loader vue-template-compiler
npm install webpack vue vue-loader css-loader vue-template-compiler3.创建文件夹src,并在里面创建两个文件App.vue和index.js3.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-plugin5.新建webpack.config.js,代码如下
const path = require('path')// 新加入 VueLoaderPluginconst 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下添加代码如下:
...