webpack 构建 vue 开发环境

1. 必要环境 请确保已安装 

?

1	node npm webpack

2.创建一个test文件夹 

?

1	mkdir test && cd test && npm init

 

3. 创建 webpack.dev.config.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

const path = require('path') const {CleanWebpackPlugin} = require('clean-webpack-plugin') // webpack插件 清除打包文件夹下多余文件 详细配置==>(https://www.npmjs.com/package/clean-webpack-plugin) const HtmlWebpackPlugin = require('html-webpack-plugin') // webpack插件    简化html创建 详细配置==>(https://github.com/jantimon/html-webpack-plugin) const VueLoaderPlugin = require('vue-loader/lib/plugin') // vue-loader 插件，它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块 const webpack = require('webpack') module.exports = {     entry: {         app: './main.js'     },     devtool: 'cheap-module-eval-source-map', // 控制如何生成 source map ==>(https://www.webpackjs.com/configuration/devtool/)     devServer: {         contentBase: './dist',         hot: true     },     mode: 'development',     module: {         rules: [             {                 test: /\.(svg)(\?.*)?$/,                 use: ['file-loader']             }, {             test: /\.css$/,             use: ['style-loader', 'css-loader'],         }, {             test: /\.vue$/,             use: ['vue-loader']         }, {             test: /\.(png|jpg|jpeg|gif)$/,             use: [{                 loader: 'url-loader',                 options: {                     limit: 10000,                     name: '[name].[ext]',                     outputPath: 'assets/img',                     publicPath: ''                 }             }]         }, {             test: /\.js$/,             use: [{                 loader: 'babel-loader',                 options: {                     presets: ['react', 'env']                 }             }],             include: [                 path.resolve(__dirname, 'src')             ]         }, {             test: /\.(woff|woff2|eot|ttf|otf)$/,             use: ['url-loader']         }]     },     plugins: [ // 插件配置         new CleanWebpackPlugin(),         new HtmlWebpackPlugin({             template: './src/index.html',             filename: 'index.html'         }),         new VueLoaderPlugin(),         new webpack.NamedModulesPlugin(),         new webpack.HotModuleReplacementPlugin()     ],     output: {         filename: '[name].js',         path: path.resolve(__dirname, 'dist')     },     resolve: {         alias: {             'vue$': 'vue/dist/vue.esm.js',             '@': 'src'         }     } }

　4.  package.json 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

{   "name": "test",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1",     "start": "webpack-dev-server --config webpack.dev.config.js"   },   "author": "",   "license": "ISC",   "devDependencies": {     "babel-core": "^6.26.3",     "babel-loader": "^8.2.2",     "babel-plugin-transform-runtime": "^6.23.0",     "babel-preset-es2015": "^6.24.1",     "babel-preset-stage-0": "^6.24.1",     "babel-runtime": "^6.26.0",     "css-loader": "^5.2.4",     "style-loader": "^2.0.0",     "vue-hot-reload-api": "^2.3.4",     "vue-html-loader": "^1.2.4",     "vue-loader": "^15.7.0",     "vue-style-loader": "^4.1.3",     "vue-template-compiler": "^2.6.12",     "webpack": "^4.29.6",     "webpack-dev-server": "^3.11.2",     "webpack-cli": "^3.2.3",     "clean-webpack-plugin": "^4.0.0-alpha.0",     "html-webpack-plugin": "^3.2.0",     "url-loader": "^1.1.2",     "file-loader": "^3.0.1"   },   "dependencies": {     "iview": "^3.5.4",     "view-design": "^4.5.0",     "vue": "^2.6.12"   } }

　　

　4　创建main.js

?

1 2 3 4 5 6 7 8 9 10

import Vue from 'vue' import App from './App.vue' import ViewUI from 'view-design'; import 'view-design/dist/styles/iview.css'; Vue.use(ViewUI); new Vue({     el: '#app',     components: {App},     template: '<App />' })

 5. 创建App.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<template>   <Button>hell vue111222</Button> </template>   <script> import {Button} from "iview"; export default {   components:{     Button   },   data() {     return {       btnName: "default",     }   },   mounted() {     } } </script>   <style lang="css" scoped>     /**      * You can change the "lang" to use sass, scss, or even more.      */ </style>

　6. 创建 index.html

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport"           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>VueJS</title> </head> <body>     <div id="app"></div> </body> </html>

　7. 执行 命令: npm run start