vue項目構建中webpack配置(一)

時間 2019-12-02

標籤 vue 項目構建 webpack 配置简体版

原文原文鏈接

因爲腳手架vue-cli的存在,咱們在作vue項目時基本都是用vue-cli搭建的,這就不須要咱們本身配置webpack了.但在實際開發過程當中會發現對webpack不瞭解的話會出現不少問題.如vue的做者尤雨溪在新手向:Vue2.0的建議學習順序中所說,瞭解前端生態/工程化，學習 Webpack 至關重要.在這裏我就分享一下我用webpack搭建的Vue項目.

首先咱們簡單創建一個項目結構

on文件css

$ npm init

接下來即是安裝各類依賴項

$ npm install --save vue安裝vue2.0html

$ npm install --save-dev webpack webpack-dev-server安裝webpack和webpack測試服務器前端

$ npm install --save-dev babel-core babel-loader babel-preset-es2015安裝babel,編譯es6vue

$ npm install --save-dev vue-loader vue-template-compiler解析vue組件和.vue的文件node

$ npm install --save-dev css-loader file-loader解析csswebpack

編寫頁面

App.vue

<template>
    <div id="demo">
        <p>{{msg}}</p>
    </div>
</template>

<script>
  export default {
      data () {
          return {
              msg: 'Hello World!'
          }
      }
  }
</script>

<style scope>
    * {
        color: #FF0000;
    }
</style>

main.js

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

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

webpack.config.js

var path = require('paht')  // 引入操做路徑模塊

module.exports = {
    // 輸入文件
    entry: './src/main.js',
    output: {
        // 輸出目錄
        path: path.resolve(__dirname, './dist'),
        // 靜態目錄,從這裏取文件
        publicPath: '/dist/',
        // 文件名
        filename: 'index.js'
    },
    module: {
        rules: [
            //解析vue後綴文件
            {test: /\.vue$/, loader: 'vue-loader'},
            //用巴babel解析js文件 排除模塊安裝目錄的文件
            {test: /\.js$/, loader: 'babel-loader',exclude: /node_modules/}
        ]
    }
}

打包項目

$ npm install -g webpack安裝全局webpack,不然輸入webpack命令會報錯不是內部命令
webpack用webpack命令打包項目es6

再index.html中引入打包生成的index.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/index.js"></script>
</body>
</html>