从0到1搭建Vue+Webpack4项目

项目目录结构

.
├── README.md
├── package.json
├── postcss.config.js
├── public
│   └── index.html
├── src
│   ├── app.vue
│   ├── assets
│   │   ├── css
│   │   │   └── index.css
│   │   └── image
│   │       └── login-form-bg.png
│   ├── entry.js
│   ├── router
│   │   └── index.js
│   ├── utils
│   │   └── index.js
│   ├── views
│   │   └── index.vue
│   └── vuex
│       └── index.js
└── webpack.config.js

Webpack配置

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    entry: "./src/entry.js",
    output: {
        filename: "js/[name].js",
        path: path.resolve(__dirname, "dist")
    },
    devtool: process.env.NODE_ENV == 'develoption' ? "inline-source-map" : "source-map",
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    process.env.NODE_ENV !== 'production'
                        ? 'vue-style-loader'
                        : MiniCssExtractPlugin.loader
                    , "style-loader", "css-loader", "postcss-loader"]
            },
            {
                test: /\.less$/,
                use: [process.env.NODE_ENV !== 'production'
                    ? 'vue-style-loader'
                    : MiniCssExtractPlugin.loader, "css-loader", "less-loader", "postcss-loader"]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [{
                    loader: "file-loader",
                    options: {
                        outputPath: 'images'
                    }
                }]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [{
                    loader: "file-loader",
                    options: {
                        outputPath: 'fonts'
                    }
                }]
            },
            {
                test: /\.vue$/,
                use: [
                    "vue-loader"
                ]
            }, {
                test: /\.m?js$/,
                use: [
                    "babel-loader"
                ]
            }
        ]
    },
    devServer: {
        contentBase: './dist',
        hot: true,
    },
    plugins: [
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: "首页",
            filename: "index.html",
            template: "./public/index.html"
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name][chunkhash].css',
            chunkFilename: "css/[id][chunkhash].css"
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.SplitChunksPlugin()
    ]
}

//postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}
//.babelrc
{
    "presets": [
        [
            "env",
            {
                "modules": false,
                "targets": {
                    "browsers": [
                        "> 1%",
                        "last 2 versions",
                        "not ie <= 8"
                    ]
                }
            }
        ]
    ]
}