webpack+vue-loader項目配置

步驟一: 安裝vscode后重啟, Win+R 輸入 npm init, 生成 package.json 文件, 一直回車默認設置, 最后輸入y;
npm init

步驟二: npm 下載安裝 webpack, vue, vue-loader, 根據警告提示安裝 css-loader;
npm i webpack vue vue-loader
npm i css-loader

 

 

 

 

 

 

 

 

 

 

步驟三: 項目部署
1、新建文件夾 src, 並在該目錄下創建文件 app.vue 和 index.js;
app.vue 具體代碼如下:

<template>
  <div id="test">{{text}}</div>
</template>

<script>
export default {
  data() {
      return {
          text: '我的第一個'
      }
  }    
}
</script>

<style>
#test{
  color: red;
}
</style>

 index.js 具體代碼如下：

 npm i style-loader 

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)

 2、在package.json文件同級目錄， 創建文件 webpack.config.js

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    // 入口文件
    entry: path.join(__dirname, 'src/index.js'),
    // 打包的輸出文件
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            }
        ]
    }
}

3、修改 package.json, 代碼如下：

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },

步驟四: 運行程序, 根據警告提示，安裝 vue-template-compiler, 再次運行 npm run build
npm run build
npm i vue-template-compiler

成功運行程序后，自動生成打包文件 dist/bundle.js， 程序結構如下：