手动构建webpack4 + vue(简易)

文件结构

  +--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"解析解构赋值
                      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这里主要用来处理自动补全浏览器前缀
                      '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"]
             //加这个后可以出现额外的兼容性前缀
             //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"
  }
}

---

后续...