【Webpack】webpack配置

step 1 安装依赖

• webpack webpack-cli webpack-dev-server
• babel-loader@7 babel-core babel-preset-env
• babel-plugin-transform-runtime babel-plugin-transform-decorators  babel-plugin-transform-decorators-legacy
• less-loader css-loader style-loader
• postcss-loader autoprefixer
• ejs-loader 处理模板
• html-webpack-plugin 处理html

--save-dev 安装在开发环境下 -D

--save 安装在生产环境下 -S

--registry=https://registry.npm.taobao.org 切换淘宝源

npm i -D webpack webpack-cli webpack-dev-server --registry=https://registry.npm.taobao.org
npm i -D babel-loader@7 babel-core babel-preset-env
npm i -D babel-plugin-transform-runtime babel-plugin-transform-decorators  babel-plugin-transform-decorators-legacy
npm i -D less-loader css-loader style-loader
npm i -D postcss-loader autoprefixer
npm i -D html-webpack-plugin ejs-loader 

step 2 配置文件

/*
 * @Desc:webpack.config.js
 * @Author: Yomuki
 * @Date: 2021-03-16 22:16:35
 * @LastEditors: Yomuki
 * @LastEditTime: 2021-03-16 22:25:14
 */
const HtmlWebpackPlugin = require("html-webpack-plugin"),
  path = require("path");
module.exports = {
  mode: "development",
  entry: {
    index: path.resolve(__dirname, "./src/js/index.js"),
  },
  output: {
    path: path.resolve(__dirname + "/dist"),
    filename: "js/[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: path.resolve(__dirname, "node_modules"),
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.tpl$/,
        use: ["ejs-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.resolve(__dirname, "./src/index.html"),
      chunks: ["index"],
      excludeChunks: ["node_modules"],
    }),
  ],
  devServer: {
    open: true,
    host: "localhost",
    port: 3300,
  },
};

dev":"webpack serve --config webpack.config.js"

.babelrc

{
    "presets": ["env"],
    "plugins": [
        "babel-plugin-transform-runtime",
        // 装饰器
        "transform-decorators-legacy"
    ]
}