webpack4.0搭建vue腳手架詳解

時間 2019-11-21

標籤 webpack4.0 webpack 搭建 vue 腳手架詳解简体版

原文原文鏈接

準備工做

前言

出於某些緣由要完成一個demo,思考後決定搭個簡單腳手架veu的spa項目來作。對於webpack基本概念(entry,output,loader,plugin,mode...)有了的認識，可是沒有嘗試擼過腳手架的朋友能夠繼續往下看。

準備工做

固然是須要node環境了

開始吧

mkdir IM-chat-vue // 建立文件項目文件夾，這邊我給demo的名字就是IM-chat-vuejavascript

mkdir build //css

mkdir src //html

npm init // 建立package.json及其初始化 vue

安裝所需的依賴

npm install --save-dev vue //基於vue的那麼vue必不可少...很少介紹java

npm install --save-dev webpack //基於webpack的那麼webpack也必不可少...很少介紹node

npm install --save-dev webpack-cli //webpack version 4+ 須要下載webpack-cli(一些指令下文可能涉及到)react

npm install --save-dev path //path模塊提供了一些工具函數，用於處理文件與目錄的路徑。webpack

npm install --save-dev html-webpack-plugin //簡化了HTML文件的建立 Plugin that simplifies creation of HTML files to serve your bundlesweb

npm install --save-dev clean-webpack-plugin //用於構建時清理構建文件夾下的內容 A webpack plugin to remove/clean your build folder(s) before buildingvue-router

npm install --save-dev vue-loader //Vue.js組件加載器(插件)

npm install --save-dev vue-template-compiler //對於模板的函數編譯與vue-loader 配合使用

npm install --save-dev webpack-dev-server //熱更新須要搭建服務模塊

npm install --save-dev style-loader css-loader //css樣式處理器

必要的依賴安裝完成後咱們在src目錄下建兩個文件 app.vue；main.js

src/app.vue

<template lang="html">
    <div class='test'>
        <p class="test">IM-chat-vue  IM-chat-vue  </p>
        {{test}}
    </div>
</template>

<script> export default { data(){ return { test:"簡單構建vue腳手架項目" } } } </script>

<style> .test{ color:red; } </style>
複製代碼

src/main.js

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

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

複製代碼

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack app</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
複製代碼

到這裏就把vue弄進項目了---如今咱們開始配置webpack對這個vue項目進行編譯打包

在剛纔建好的build文件夾建立webpack.config.js及代碼

const path = require('path');    //path 模塊提供了一些工具函數，用於處理文件與目錄的路徑。
const HtmlWebpackPlugin = require('html-webpack-plugin');   //構建html文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');  // 清理構建目錄下的文件
const webpack = require('webpack');       //webpack打包工具
const VueLoaderPlugin = require('vue-loader/lib/plugin');         // vue-loader 編譯vue文件
module.exports = {
    mode: "development",
    entry: {       //入口
        "app": path.resolve(__dirname, "./../src/main.js")
    },
    module:{            //處理項目中的不一樣類型的模塊。
        rules:[      // rules 各類規則(數組類型) 每一個規則能夠分爲三部分 - 條件(condition)，結果(result)和嵌套規則(nested rule)
            {
                test:/\.css/,
                use: ['style-loader', 'css-loader']   // style-loader 和css-loader 編譯css處理
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'         //vue-loader 編譯vue模塊
            }
        ]
    },
    devtool: 'inline-source-map',   //生曾map 映射對應代碼 方便錯誤查詢
    devServer:{
        contentBase: './dist',    // 告訴服務從哪提供代碼內容(靜態文件這麼使用)
        hot:true    //hot模式開啓
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({            // 構建html
            filename:'index.html',      //文件名
            title:'im-chat-vue',            //title
            template:'./index.html',       //參照模板樣式
        }),
        new webpack.HotModuleReplacementPlugin(),  //熱模塊替換開啓
        new VueLoaderPlugin()                 //vue-loader插件開啓
    ],
    output: {        //出口
        filename: 'index.js',    //文件名
        path: path.resolve(__dirname, '../dist'),   //路徑
        publicPath:""        //srcript 引入路徑
    },
    resolve:{
        //引入路徑是不用寫對應的後綴名
        extensions: ['.js', '.vue', '.json'],
        alias:{
            //正在使用的是vue的運行時版本，而此版本中的編譯器時不可用的，咱們須要把它切換成運行時 + 編譯的版本
            'vue$':'vue/dist/vue.esm.js',
            //用@直接指引到src目錄下
            '@': path.resolve(__dirname,'./src'),
        }
    },

};


複製代碼

完成上述步驟後咱們能夠開始在package.json添加script命令

{
  "name": "im-chat-vue",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config=build/webpack.config.js"
  },
  "author": "ruindong",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "path": "^0.12.7",
    "style-loader": "^1.0.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}
複製代碼

接下來執行npm run build 就編譯成功了。同時生成dist文件下有如圖

把index.html文件在瀏覽器上打開就如圖

到此一個簡單的編譯打包vue項目的腳手架就完成了。可是這仍是遠遠不夠的。開發中咱們還須要不少輔助，好比熱更新。

由於上面已經在webpack.config.js配置了熱更新碼。因此只須要需改package.json添加啓動熱更新的script命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --config build/webpack.config.js",
    "build": "webpack --config=build/webpack.config.js"
  },
複製代碼

接下來執行npm run dev 就熱更新就編譯成功了。修改代碼網頁上能夠同步熱更新了

到此一個簡單的腳手架已經完成。是否是比想象中簡單

如今開始作腳手架處理預編譯css。以及css分離

我的喜歡用less因此這邊只介紹less的loadder處理

npm install --save-dev less

npm install --save-dev less-loader; npm install extract-text-webpack-plugin --save-dev

//安裝less和必須的less-loader(把它理解成less編譯成css的編譯器，缺它不可)；

module:{            //處理項目中的不一樣類型的模塊。
        rules:[      // rules 各類規則(數組類型) 每一個規則能夠分爲三部分 - 條件(condition)，結果(result)和嵌套規則(nested rule)
            {
                test:/\.css/,
                use: ['style-loader', 'css-loader']   // style-loader 和css-loader 編譯css處理
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'         //vue-loader 編譯vue模塊
            },
            {
                test:/\.less/,
                use: ['style-loader', 'css-loader', 'less-loader'] // 編譯 Less to CSS
            }
        ]
    },
複製代碼

npm install --save-dev extract-text-webpack-plugin //抽離css webpack4已經廢棄

npm install --save-dev MiniCssExtractPlugin //使用這個抽離css

自動處理CSS3屬性前綴首先須要安裝兩個包postcss-loader 和autoprefixer（自動添加前綴的插件）先在根目錄增長postcss.config.js

// postcss.config.js
module.exports = {
    plugins: {
        'autoprefixer': {
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8"
            ]
        },
        // 'postcss-pxtorem': {
        // rootValue: 37.5,
        // propList: ['*']
        // } //有須要再用
    }
}
複製代碼

// build/webpack.config.js
const path = require('path');    //path 模塊提供了一些工具函數，用於處理文件與目錄的路徑。
const HtmlWebpackPlugin = require('html-webpack-plugin');   //構建html文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');  // 清理構建目錄下的文件
const webpack = require('webpack');       //webpack打包工具
const VueLoaderPlugin = require('vue-loader/lib/plugin');         // vue-loader 編譯vue文件
//const ExtractTextPlugin = require("extract-text-webpack-plugin"); //css分離 webpack4已經不支持
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //css分離

module.exports = {
    mode: "development",
    entry: {       //入口
        "app": path.resolve(__dirname, "../src/main.js")
    },
    module:{            //處理項目中的不一樣類型的模塊。
        rules:[      // rules 各類規則(數組類型) 每一個規則能夠分爲三部分 - 條件(condition)，結果(result)和嵌套規則(nested rule)
            {
                test: /\.(sa|sc|le|c)ss$/,
                use: [
                    'style-loader',
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: true,
                        },
                    },
                    'css-loader',
                    'less-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            config: { path: path.resolve(__dirname, '../postcss.config.js') }
                        },
                    }
                ],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'         //vue-loader 編譯vue模塊
            }
        ]
    },
    devtool: 'inline-source-map',   //生曾map 映射對應代碼 方便錯誤查詢
    devServer:{
        contentBase: path.resolve(__dirname, '../dist'),    // 告訴服務從哪提供代碼內容(靜態文件這麼使用)
        hot:true    //hot模式開啓
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({            // 構建html
            filename:'index.html',      //文件名
            title:'im-chat-vue',            //title
            template:'index.html',       //參照模板樣式
        }),
        new webpack.HotModuleReplacementPlugin(),  //熱模塊替換開啓
        new VueLoaderPlugin(),                 //vue-loader插件開啓
        //new ExtractTextPlugin("index.css") //配置分離出來的css文件地址webpack4已經用不了了
        new MiniCssExtractPlugin({
            // 相似 webpackOptions.output裏面的配置 能夠忽略
            filename: 'css/[name].css',
            //chunkFilename: 'css/[id].css',
        })
    ],
    output: {        //出口
        filename: 'index.js',    //文件名
        path: path.resolve(__dirname, '../dist'),   //路徑
        publicPath:""        //srcript 引入路徑
    },
    resolve:{
        //引入路徑是不用寫對應的後綴名
        extensions: ['.js', '.vue', '.json'],
        alias:{
            //正在使用的是vue的運行時版本，而此版本中的編譯器時不可用的，咱們須要把它切換成運行時 + 編譯的版本
            'vue$':'vue/dist/vue.esm.js',
            //用@直接指引到src目錄下
            '@': path.resolve(__dirname,'../src'),
        }
    },

};


複製代碼