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的配置项成千上万，我须要作的是了解其经常使用的配置，而后摸索其它，遇到问题再去查询解决。写的很差的地方请你们留言指出。