文件結(jié)構(gòu)

  +--config
  |  +--webpack.base.config.js
  |  +--webpack.dev.config.js
  +--src
  |  +--assets
  |  +--components
  |  +--app.vue
  |  +--main.js
  +--static
  +--index.html
  +--package.json
  +--postcss.config.js

webpack.base.config.js配置

  const webpack = require("webpack");
  const path = require("path");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  //分離css
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  //webpack4必須顯性引入vue-loader插件
  const VueLoaderPlugin = require("vue-loader/lib/plugin");
  module.exports = {
      //mode: "production",
      entry: {
          app: path.resolve(__dirname, "../src/main.js")
      },
      output: {
          //將會輸出到dist文件夾下所屬js文件夾中
          filename: "js/[name].js",
          path: path.resolve(__dirname, "../dist")
      },
      module: {
          rules: [
              {
                  test: /\.js$/,
                  loader: "babel-loader",
                  include: [path.resolve(__dirname, "../src"), path.resolve(__dirname, "../node_modules/webpack-dev-server/client")],
                  options: {
                      //加上"stage-0/stage-1/stage-2/stage-3"解析解構(gòu)賦值
                      presets: ["babel-preset-env", "stage-3"],
                      plugins: ["babel-plugin-transform-runtime"]
                  }
              },
              {
                  test: /\.scss$/,
                  use: [
                      //"style-loader",
                       MiniCssExtractPlugin.loader,
                      { loader: 'css-loader', options: { importLoaders: 1 } },
                      //postcss-loader這里主要用來處理自動補(bǔ)全瀏覽器前綴
                      'postcss-loader', 
                      "sass-loader"
                  ]
              },
              {
                  test: /\.vue$/,
                  loader: "vue-loader"
              },
              {
                  test: /.(jpg|png|gif|jpeg)$/,
                  use: [
                      {
                          loader: "file-loader",
                          options: {
                              limit: 1000,
                              //打包之后的圖片將會在dist文件夾下images文件夾中
                              outputPath: "images/"
                          }
                      }
                  ]
              }
          ]
      },
      plugins: [
          new HtmlWebpackPlugin({
              //title: "Webpack App",
              filename: "index.html",
              template: path.resolve(__dirname, "../index.html")
          }),
          new MiniCssExtractPlugin({
              filename: "[name].css"
          }),
          new VueLoaderPlugin()
      ]
  }

webpack.dev.config.js配置

  const baseConfig = require("./webpack.base.config.js");
  //此插件主要起到合并的作用
  const merge = require("webpack-merge");
  //const webpack = require("webpack");
  module.exports = merge(baseConfig, {
      //mode: "development",
      devtool: "cheap-module-eval-source-map",
      devServer: {
          port: 9090,
          compress: true,
          inline: true,
          open: true,
          hot: true
      }
  })

postcss.config.js配置

  //這里只用作處理瀏覽器前綴
  module.exports = {
      plugins: [
         require('autoprefixer')({
             browsers: ["last 3 versions"]
             //加這個(gè)后可以出現(xiàn)額外的兼容性前綴
             //browsers: ["> 0.01%"]
         })
      ]
  }

貼一下package.json

{
  "devDependencies": {
    "autoprefixer": "^9.3.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-3": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.4",
    "node-sass": "^4.9.4",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10",
    "webpack-merge": "^4.1.4"
  },
  "scripts": {
    "build": "webpack --config config/webpack.base.config.js",
    "dev": "webpack-dev-server --hot --inline --open --config config/webpack.dev.config.js"
  },
  "dependencies": {
    "vue": "^2.5.17"
  }
}

后續(xù)...