webpack4配置手動搭建vue

首先簡單說下目錄結構

build目錄：存放webpack的配置項

public：index模板

src：vue的入口以及頁面

其它的配置在稍後細細道來~~~

環境：node8.9.4 、vue2.6.十、webpack4.41.2

1.vue頁面路由入口等（很少略過）

import Vue from 'vue'
import App from './app.vue'
import router from './route.js'
import './assets/app.styl'


new Vue({
    router,
    render: h => h(App)
}).$mount("#app");
複製代碼

樣式主要是用stylus，固然你也能夠用sass、less等，頁面只有兩個。

home.vue

<template>
    <div class="container">
        <span>hello world!</span>
        <img src="@/assets/bghtml_1.jpg" alt="">
    </div>
</template>
<style scoped lang="stylus">
    .container
        span
            color yellow
</style>
複製代碼

test.vue

<template>
    <div class="container">
        <span>hello test!!!!</span>
    </div>
</template>

<style scoped lang="stylus">
    .container
        span
            color green
</style>
複製代碼

講幾個我配置的時候遇到的問題或應用（探索老是這麼的~~）

1.啓動項目服務vue頁面空白？

配置好了一切信心滿滿的啓動開發調試，發現vue的頁面沒有展現出來（白板），我覺得是路由問題，路由就只有兩個（應該沒有問題啊~~）。因而我去查了一下vue-loade。vue-template-compiler（vue-loader有詳細介紹） 就是這個東西，安裝後去webpack的plugin中引用，以下

2.建立模塊路徑別名。

個人webpack配置在build下面，因此用了../src,想必用過腳手架vue-cli的都配置過這個東西。引用的話直接用@代替src/。

3.處理靜態資源只引入url-loader報錯？

運行的時候一直報圖片錯誤。老樣子去查詢url-loader，官方講到url-loader，options的一些配置就是file-loader的一些配置，我試了一下安裝了file-loader，再啓動服務，成功。webpack走url-loder options的某些配置，會去查找file-loader這個包。

4.提取css爲單獨的文件？

按照官方的安裝、配置，一切看起來都是那麼的完美，可是webpack打包的時候也沒報錯，也沒warning。找來找去找不到問題所在，這個時候只有求助於google搜索引擎，看見一篇貼子說若是webpack作tree shaking（一般用於描述移除 JavaScript上下文中的未引用代碼）的時候，必定要把css文件標記爲無反作用，不然打包會移除css文件。

如上在package.json裏面寫入css和styl（個人文件是stylus文件）。意思就是遇到css文件和styl文件就不作tree shaking處理。

5.babel中.babelrc的配置。

若是要使用es6的語法，必需要用babel轉譯爲遊覽器可運行的代碼。你要使用一些includes方法等，必需要使用@ babel / polyfill或者@babel/plugin-transform-runtime，自行查詢babel知識。 固然也能夠：

在.babelrc配置了"useBuiltIns": "usage"後，Babel 會在你使用到 ES2015+ 新特性時，自動添加 babel-polyfill 的引用，按需引入。

完整配置webpack.dev.js開發環境，webpack.pro.js生產環境，webpack.common.js公用配置

webpack.dev.js

const webpackMerge = require('webpack-merge');
const common = require('./webpack.common');
const webpack = require('webpack');
const path = require('path');

module.exports = webpackMerge({
    mode: 'development',
    devServer: {
        // contentBase: '../dist',
        publicPath: '/',
        compress: true,
        hot: true,
        hotOnly: true,
        port: 8080,
        overlay: true,
        clientLogLevel: 'none'
    },
    devtool: 'cheap-module-eval-source-map',
    module: {
        rules: [
            {
                test: /\.(stylus|styl)$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2
                        }
                    },
                    'postcss-loader',
                    'stylus-loader',
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
}, common);
複製代碼

webpack.pro.js

const webpackMerge = require('webpack-merge');
const common = require('./webpack.common');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = webpackMerge({
    mode: 'production',
    module:{
        rules:[
            {
                test: /\.(stylus|styl)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2
                        }
                    },
                    'postcss-loader',
                    'stylus-loader',
                ]
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            }
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "css/[name].[hash].css",
        }),
        // 每次打包刪除上次的包文件
        new CleanWebpackPlugin()
    ]
}, common);
複製代碼

webpack.common.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'js/[name].[hash].js'
    },
    resolve:{
        alias: {
            '@': path.resolve(__dirname, '../src/'),
        }
    },
    optimization: {
        // 生產環境默認啓用tree shaking
        usedExports: true,
        // 用於代碼分離
        splitChunks: {
            chunks: 'all'
        }
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node-modules/,
                use: [
                    {
                        loader: 'babel-loader'
                    }
                ]
            },
            {
                test: /\.vue$/,
                use: [
                    'vue-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            outputPath: 'images/'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        // 使用vue必要的plugins
        new VueLoaderPlugin(),
        // 自動生成index.html
        new htmlWebpackPlugin({
            template: 'public/index.html',
            favicon: 'public/favicon.ico',
            inject: true
        })
    ]
};
複製代碼

最終打包結果。

home頁面

test頁面

至此，一個webpack簡單搭建的vue項目完成，還有不少的配置項去優化。webpack的配置項成千上萬，我須要作的是瞭解其經常使用的配置，而後摸索其它，遇到問題再去查詢解決。寫的很差的地方請你們留言指出。