Vue2從0到1(一)：用webpack打包vue

時間 2019-11-06

標籤 vue2 vue webpack 打包简体版

原文原文鏈接

webpack-vue

0.項目初始化

cd 'to/your/path' npm initcss

1.安裝 webpack

分爲全局安裝和項目內安裝html

npm install webpack -g
    npm install webpack --save-dev

2.配置webpack.config.js文件

const path = require('path');

     module.exports = {
         entry: './Script/main.js', //項目入口文件
         output:{                    //輸出編譯後文件地址及文件名
             path: path.resolve(__dirname, 'dist'),
             filename: 'js/bundle.js'
         }
     };

命令行裏面執行 webpack 命令便可看到編譯後的文件vue

3安裝webpack-html-plugin

npm install html-webpack-plugin --save-devnode

const HtmlWebpackPlugin = require('html-webpack-plugin');
    ...
    plugins:[
        ...
        new HtmlWebpackPlugin({
            title:'react 學習',
            inject:'body',
            filename:'index.html',
            template:path.resolve(__dirname, "index.html")
        }),
        ...
    ]

再次執行webpack命令可看到多了一個index.html文件
這個文件是根據模板生成的並自動引入打包生成的js文件
運行打包後的index.html便可看到效果。react

4.安裝Vue

npm install vue -save

修改main.js：webpack

import Vue from  'vue';

    var MainCtrl = new Vue({
        el:'#main',
        data:{
            message:'Hello world'
        }
    })

修改index.html:git

<div id="main">
      <h3>{{message}}</h3>
   </div>

執行webpack打包運行index.html(打包的文件)報錯，經查在webpack.config.js裏面配置：es6

...
    resolve: { alias: { 'vue': 'vue/dist/vue.js' } }

再次運行便可看到效果
github

5.安裝webpack-dev-server熱更新

npm install webpack-dev-server -g
    npm install webpack-dev-server --save-dev
    npm install vue-hot-reload-api --save-dev

配置webpack.config.jsweb

...
    devServer: {
        historyApiFallback: true,
    },
    ...

配置package.json裏面命令

"start":"webpack-dev-server --hot --inline --progress --open"

執行 npm start 瀏覽器自動打開頁面，更改文件後便可看到頁面實時更新

6.安裝babel

在使用.vue文件以前先要安裝babel(將es6語法轉化爲es5)

npm install babel-core babel-loader babel-plugin-transform-runtime --save-dev 
    npm install babel-preset-stage-0 babel-runtime babel-preset-es2015 --save-dev

項目根目錄新建.babelrc文件、配置：

{
    "presets": ["es2015", "stage-0"],
    "plugins": ["transform-runtime"]
    }

7.安裝vue-loader處理.vue的文件

安裝loader 處理.css,.vue文件

npm install css-loader style-loader vue-loader vue-html-loader --save-dev

配置webpack.config.js

...
   module:{
       loaders: [
           {test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/},
           {test: /\.vue$/,loader: 'vue-loader'}]
        },
    //vue: {loaders: {js: 'babel'}}
   ...

配置完運行報錯：Cannot find module 'vue-template-compiler'
安裝vue-template-compiler

cnpm install vue-template-compiler --save-dev

修改index.html:

<body>
   <div id="main">
      <app></app>   
   </div>
  </body>

新建src/index.vue:

<template>
    <div class="message">{{ msg }}</div>
  </template>

    <script>
        export default {
        data () {
            return {
            msg: 'Hello from vue-loader!'
            }
        }
        }
    </script>

    <style>
        .message {
        color: blue;
        }
    </style>

修改main.js

...
    import App from './src/index.vue';

    new Vue({
        el: '#main',
        components: { App }
    })

保存後運行 npm start 便可看到效果

修改代碼，便可看到更新後的效果

後面將持續更新vue-router，vuex的內容。代碼託管在github上歡迎star

相關標籤/搜索

從0到1

webpack 從0到1構建

vue2+vuerouter2+webpack+vue

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。