webpack+vue 创建项目

本文使用webpack+vue创建项目。本文基于wenpack4.6.0、vue2.x 、node.js 8.11.0.

由于代码中会使用es6的语法，因此需要babel转码器。

1.创建项目。npm init

2.本地安装如下插件。安装完后package.json如下所示：

{
  "name": "single-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",       
    "html-plugin": "^0.1.0",
    "html-webpack-plugin": "^3.2.0",
    "vue": "^2.5.16",
    "vue-hot-reload-api": "^2.3.0",
    "vue-loader": "^15.0.1",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server  --open --inline",
    "dev": "webpack --mode development"
  },
  "author": "",
  "license": "ISC"
}

3.创建配置文件webpak.config.js实现对。vue文件的和es6的解析,并且配置实时热更新。

const path = require('path')
 const { VueLoaderPlugin } = require('vue-loader');
const  ExtractTextPlugin=require("extract-text-webpack-plugin");

const webpack = require ("webpack");  
const webpackDevServer = require('webpack-dev-server');  

module.exports = {
  mode: 'development',
  entry:{
  		main:"./main.js"
  	},
  	output:{
  		path:path.join(__dirname,"./dist"),
  		publicPath:'/dist/',
  		filename:"main.js"
  	},

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude:/node_modules/
      },
     
      {
        test: /\.css$/,
        use:ExtractTextPlugin.extract({
        	use:'css-loader',
        	fallback:'style-loader',
        })                           
      }
    ]
  },
  plugins: [
 
    new VueLoaderPlugin(),       //处理vue文件
    new ExtractTextPlugin("main.css"),   //提取css
    new webpack.HotModuleReplacementPlugin()    //热更新功能
  ],
   devServer:{                                     //配置  
      contentBase: "./",   
      historyApiFallback:true,  
      inline:true,  
      progress:true,  
      hot:true,  
      port:8080  
  },  
  resolve: { 
  	alias: { 'vue$':'vue/dist/vue.js'}     //解析vue.js时必须写这个
   }
 

}

4.创建.babelrc文件。因为要转码es6。

	
	"presets":["es2015"],
	"plugins":["transform-runtime"],
	"comments":false
}

5.创建入口文件main.js

import Vue from 'vue'
import App from './app.vue'

new Vue({
  el: '#app',
  template: '<App/>',  
  components: { App }  
});

或者是：

import Vue from 'vue'
import App from './app.vue'

new Vue({
  el: '#app',
  render:h=>h(App)
});

这两种写法都可以将组件渲染到挂在元素上。注意挂在元素不能时body或html。

6.创建app.vue。由三部分组成：template、script、style。template是组件的模板。script是组件的构造器。style为样式。

<template>
<div class="message">{{name}}</div>    
</template>
<script>
export default {
  data () {
    return {
      name: 'Hello from vue-loader'
    }
  }
}
</script>
<style scoped>
.message{
    color:red;
    font-size:36px;
    font-weight:blod;
}
</style>

7.创建index.html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue example</title>
    <link rel="stylesheet" href="dist/main.css">
</head>
<body>
	<div id="app"></div>
    
    <script src="dist/main.js"></script>
</body>
</html>

8.运行 npm run dev 打包组件。

显示如下：data-v-381730fa是因为style的scoped所致，该样式只能在该vue组件内使用。

9.改变app.vue内的script内 data对象的name属性值，保存页面，打开刚才的页面，可以看到页面内容更新，但是此时却没有刷新页面。即实现了热更新。

webpack实现热更新请参考我的上篇文章：点击打开链接。

webpack+vue 创建项目

猜你喜欢