vue-loader+webpack配置項目流程

前提：安裝了node.js與npm

1.創建一個npm項目 
新建項目文件夾，打開終端，將路徑移動至此文件夾，初始化輸入

npm init

按照提示輸入項目名稱，描述，做者等信息（可回車跳過） 
成功建立npm項目

 

2. 安裝所須要的包 
在終端中輸入

npm install webpack vue vue-loder css-loader vue-template-compiler

*可根據警告中的提示安裝缺乏的包 
等待安裝完成

 

3.創建源碼放置的目錄 
在項目文件夾中新建一個文件夾src做爲源碼放置目錄 
在此目錄中能夠建立.vue文件 例如建立app.vue

<template>
    <div id="main">{{text}}</div>
</template>
<script>
    export default {
        data(){
            return {
                text:"welcome to vue.js"
            }
        }
    }
</script>
<style>
    #main{
        font-size: 26px;
        color: red;
    }
</style>

可是，.vue文件沒法在瀏覽器當中直接運行，因此咱們須要用必定的方法使之能夠運行

 

4.建立入口文件 
在src目錄下建立入口文件index.js,將vue渲染到HTML中，模板以下

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)/*掛載元素*/

 

5.建立webpack.config.js文件 
在項目文件夾中建立一個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')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // 它會應用到普通的 `.css` 文件
            // 以及 `.vue` 文件中的 `<style>` 塊
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            }
        ]
    },/*爲.vue文件配置加載器，只支持原生js*/
    plugins: [
        new VueLoaderPlugin()
    ],
    mode: 'development',
}

在此文件中要聲明入口和出口，路徑使用絕對路徑

 

6.修改package.json文件 
爲根目錄下package.json文件中scripts添加代碼

"build": "webpack --config webpack.config.js"

添加此代碼後的package.json模板爲

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^1.0.1",
    "vue": "^2.5.17",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.23.1"
  },
  "devDependencies": {
    "webpack-cli": "^3.1.2"
  }
}

完成以上步驟後，在終端輸入

npm run build

運行無誤後發現根目錄中新增了一個名爲dist的文件夾，其中有一個名爲bundle.js文件，此文件爲npm將各種資源打包以後產生的文件 
這樣，就完成了項目的配置

 

注意：最新的　vue-loader　還須要在 webpack.config.js中的plugins 中使用