Feat/self

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+*.log
+dist

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    "@babel/preset-env"
+  ]
+}

build/plugins/deleteBuildFile.js

@@ -0,0 +1,33 @@
+/**
+ * 一个删除dist文件的目录
+ */
+const fs = require('fs');
+const path = require('path');
+
+function deleteFolder(filePath) {
+  fs.stat(filePath, (err, stat) => {
+    if (stat.isFile()) {
+      fs.rm(filePath, err => console.log(err))
+    } else {
+      const files = fs.readdirSync(filePath);
+      files.forEach(p => {
+        deleteFolder(path.resolve(filePath, p))
+      })
+    }
+  });
+}
+
+class DeleteBuildFile {
+  constructor(options = {}) {
+    this.options = options
+  }
+  apply(compiler) {
+    compiler.hooks.run.tap('DeleteBuildFile', (compilation) => {
+      const outputPath = compilation.options.output.path;
+      console.log('delete: ', outputPath);
+      deleteFolder(outputPath);
+    })
+  }
+}
+
+module.exports = DeleteBuildFile;

build/utils.js

@@ -0,0 +1,41 @@
+const path = require("path");
+
+exports.resolve = function (dir) {
+  return path.join(__dirname, "..", dir);
+};
+
+// babel-loader配置
+exports.babelLoaderConf = {
+  loader: "babel-loader",
+  options: {
+    presets: [
+      [
+        "@babel/preset-env",
+        {
+          targets: {
+            browsers: ["ie>=8", "chrome>=62"],
+            node: "8.9.0",
+          },
+          debug: false,
+          useBuiltIns: "usage",
+          corejs: "3.0",
+        },
+      ],
+      [
+        "@babel/preset-typescript",
+        {
+          allExtensions: true, // 支持所有文件扩展名，否则在vue文件中使用ts会报错
+        },
+      ],
+    ],
+    plugins: [
+      [
+        "@babel/plugin-transform-runtime",
+        {
+          corejs: 3,
+        },
+      ],
+      "@babel/plugin-transform-async-to-generator",
+    ],
+  },
+};

build/webpack.config.js

@@ -0,0 +1,62 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+const DeleteBuildFile = require('./plugins/deleteBuildFile')
+const { VueLoaderPlugin } = require('vue-loader/dist/index')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const { babelLoaderConf } = require('./utils.js')
+
+module.exports = {
+  mode: 'development',
+  entry: {
+    // 配置入口文件
+    main: ["@babel/polyfill", path.resolve(__dirname, '../src/main.js')],
+  },
+  output: {
+    // 配置打包输出目录
+    path: path.resolve(__dirname, '../dist'),
+    // 生成的js 文件名称
+    filename: 'js/[name].[hash:8].js',
+    // 生成的chunk 文件名称
+    chunkFilename: 'js/[name].[hash:8].js',
+  },
+  resolve: {
+    extensions: ['.js', '.ts']
+  },
+  devServer: {
+    static: './dist',
+    port: 8000,
+    hot: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+      },
+      {
+        test: /\.(css|sass|scss)$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          'sass-loader',
+        ]
+      },
+      {
+        test: /\.(ts|js)x?$/,
+        use: [babelLoaderConf],
+        exclude: /node_modules/,
+      },
+    ]
+  },
+  plugins: [
+    // new DeleteBuildFile(),
+    new CleanWebpackPlugin(), // 每次打包的时候，都会把 dist 目录清空，和自定义的DeleteBuildFile作用差不多
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, '../public/index.html'),
+      filename: 'index.html', // 打包后输出的文件名
+      title: '手搭 Vue 开发环境'  // index.html 模板内，通过 <%= htmlWebpackPlugin.options.title %> 拿到的变量
+    }),
+    new VueLoaderPlugin(),
+  ]
+}