前言

看了很多童鞋關(guān)于用webpack手動(dòng)搭建vue項(xiàng)目的文章训枢，自己從中也學(xué)到了一些，在這里做個(gè)小的栗子醉旦，供以后學(xué)習(xí)拓展饶米，有總結(jié)不周的地方，大家可以提一些建議车胡，多多益善

一檬输、Webpack

在搭建Vue項(xiàng)目前，我們需要先了解一下webpack是干啥的匈棘，大家可以去 webpack中文文檔 進(jìn)行系統(tǒng)型的學(xué)習(xí)丧慈，在下面的配置中也會(huì)說(shuō)到這些關(guān)鍵的配置詞語(yǔ)，由于咱們主要講的是用Webpack來(lái)搭建Vue項(xiàng)目主卫，所以在這里關(guān)于Webpack的一些詳細(xì)介紹各位童鞋闊以下去補(bǔ)補(bǔ)課逃默。

二、步入正題

1.初始化項(xiàng)目 npm init

初始化.jpg

使用 npm init 指令創(chuàng)建項(xiàng)目描述文件 package.json簇搅，命令行里面會(huì)以問(wèn)答的形式來(lái)填一些項(xiàng)目的介紹信息完域，下面我們依次來(lái)看一下：

現(xiàn)在我們打開(kāi)package.json瘩将，就可以看到剛剛的項(xiàng)目介紹信息

2.創(chuàng)建項(xiàng)目需要的基礎(chǔ)文件夾以及基礎(chǔ)文件

• 手動(dòng)創(chuàng)建
• 復(fù)習(xí)一下liunx命令
  • mkdir [文件夾名稱] 創(chuàng)建文件夾
  • touch [文件名稱] 創(chuàng)建文件

目前創(chuàng)建完的目錄是醬的：

文件目錄.jpg

3. 按照webpack以及一系列的依賴文件 npm install

{
  "name": "vuedemo",
  "version": "1.0.0",
  "description": "webpack + vue demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "dependencies": {
    "html-webpack-plugin": "^3.2.0",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "cross-env": "^5.2.0",
    "css-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "url-loader": "^2.0.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.34.0",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.1"
  },
  "author": "xiaowu",
  "license": "ISC"
}

我們首先來(lái)看一下package.json里面的devDependencies和dependencies的區(qū)別：

• devDependencies
  開(kāi)發(fā)應(yīng)用時(shí)所依賴的工具包关噪。通常是一些開(kāi)發(fā)、測(cè)試乌妙、打包工具使兔，例如 webpack。應(yīng)用正常運(yùn)行并不依賴于這些包藤韵，用戶在使用 npm install 安裝你的包時(shí)也不會(huì)安裝這些依賴虐沥。
• dependencies：
  應(yīng)用能夠正常運(yùn)行所依賴的包，用戶在使用 npm install 安裝你的包時(shí)會(huì)自動(dòng)安裝這些依賴泽艘。

看一下開(kāi)發(fā)環(huán)境下所依賴的工具包：

4.配置 webpack.config.js

const path = require('path'); // 路徑處理模塊 nodeJs基本包
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin') // html解析插件
module.exports = {
    entry: path.resolve(__dirname,"../src/main.js"), // 項(xiàng)目總?cè)肟趈s文件 __dirname表示當(dāng)前文件的路徑
     // 輸出文件
     output: {
        path: path.resolve(__dirname, 'dist'), // 所有的文件都輸出到dist/目錄下
        filename: '[name].[hash].js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                        // the "scss" and "sass" values for the lang attribute to the right configs here.
                        // other preprocessors should work out of the box, no loader config like this necessary.
                        'scss': 'vue-style-loader!css-loader!sass-loader',
                        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
                    }
                    // other vue-loader options go here
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.styl/,
                use: [
                    'style-loader',
                    'css-loader',
                    'stylus-loader'//這個(gè)loader依賴stylus這個(gè)包带兜，所以裝的時(shí)候還要安裝這個(gè)stylus
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'url-loader', // 能夠?qū)D片轉(zhuǎn)成base64代碼直接寫在js里面,依賴file-loader，所以在安裝的時(shí)候不僅要裝url-loader還要裝file-loader
                options: {
                    name(file) {
                        if (process.env.NODE_ENV === 'development') {
                        return '[path][name].[ext]';
                        }

                        return '[hash].[ext]';
                    },
                    limit: 8192,
                    outputPath: "dist/images/"  
                }
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(), // 最新版的vue-loader需要配置插件
        // 具體配置https://github.com/jantimon/html-webpack-plugin
        new HtmlWebpackPlugin({
            filename: process.env.NODE_ENV === "production" ? '../index.html' : "index.html", // 生成html文件的名字吨灭，默認(rèn)為index.html
            template: 'index.html', // 當(dāng)webpack自動(dòng)生成html文件的時(shí)候刚照，會(huì)基于某個(gè)模板來(lái)進(jìn)行
            inject: "body", // 所有javascript資源將被放置在body元素的底部
            chunks: ["main"] // 只添加main.js/main.css
        })
    ],
    // http://www.reibang.com/p/62dc120d96d0
    // 使用eval打包源文件模塊，在同一個(gè)文件中生成干凈的完整的source map喧兄。這個(gè)選項(xiàng)可以在不影響構(gòu)建速度的前提下生成完整的sourcemap无畔，但是對(duì)打包后
    // 輸出的JS文件的執(zhí)行具有性能和安全的隱患。不過(guò)在開(kāi)發(fā)階段這是一個(gè)非常好的選項(xiàng)吠冤，但是在生產(chǎn)階段一定不要用這個(gè)選項(xiàng)浑彰；
    devtool: '#eval-source-map', // 調(diào)試
    // 模塊resolve的規(guī)則
    resolve: {
         // 配置路徑別名，比如import Vue from 'vue/dist/vue.common.js'--> import Vue from 'vue'
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    devServer: {
        historyApiFallback: true, // 不跳轉(zhuǎn)
        hot: true, // 熱加載咨演，不需要刷新頁(yè)面就能加載出來(lái)
        inline: true, // 實(shí)時(shí)刷新
        stats: { colors: true } // 終端輸出為彩色
    }
}
// 是否是生產(chǎn)環(huán)境
if (process.env.NODE_ENV === 'production') {
    //  module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
        'process.env': {
        NODE_ENV: '"production"'
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
        warnings: false
        }
    }),
    new webpack.LoaderOptionsPlugin({
        minimize: true
    })
    ])
}

5.App.vue

<template>
    <div id="app">
        {{msg}}
    </div>
</template>

<script>
export default {
    name:'app',
    data(){
        return {
            msg:'HelloWorld'
        }
    }
}
</script>

<style>

</style>

6.main.js

import Vue from "vue";
import App from "./App.vue";

new Vue({
    el: '#app',
    components: {App},
    template: '<App/>',
})

7.package.json中的script中加一個(gè)命令"dev"

"dev": "cross-env NODE_ENV=development webpack-dev-server  --config ./config/webpack.config.js --open --hot"

8. 運(yùn)行 npm run dev

運(yùn)行.jpg

暫時(shí)只寫了單頁(yè)面闸昨，之后會(huì)拓展并且會(huì)總結(jié)在其中遇到的bug蚯斯，中間有不足的地方大家闊以提粗來(lái)薄风，蟹蟹～