乐趣区

关于webpack:webpack配置

const path=require('path')
var basePath = __dirname;
var HtmlWebpackPlugin = require("html-webpack-plugin");// 引入第三方库

module.exports={context: path.join(basePath, "src"),// 根本目录,一个绝对路径,用于解析配置中的入口点和加载程序。entry:[// 入口
        "./index.tsx"
    ],
    output:{// 进口
        path: path.join(basePath, "dist"),
        filename:"bundle.js"

    },
    resolve: {// 解析
        extensions: [".js", ".ts", ".tsx"]
      },
    module:{
        rules: [
            {test: /\.(js|tsx?)$/,
              exclude: /node_modules/,
              use: {
                loader: "awesome-typescript-loader",//TS 转成指定版本的 TS
                options: {
                  useBabel: true,
                  babelCore: "@babel/core",
                }
              }
            },
            {
                test: /\.css$/,
                use: ["css-loader"]
                // use: ["style-loader","css-loader?sourceMap"]
              },
              {test: /\.(png|jpg|gif|svg)$/,
                loader: "file-loader",
                options: {name: "assets/img/[name].[ext]?[hash]"
                }
              }
        
          ]
      
    },
    devServer: {
        contentBase: "./dist", // Content base
        inline: true, // Enable watch and live reload
        host: "localhost",
        port: 8080,
        stats: "errors-only"
      },
      
        plugins: [// 插件
            //Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
            new HtmlWebpackPlugin({
              filename: "index.html", //Name of file in ./dist/
              template: "index.html", //Name of template in ./src
              hash: true
            })]
            
    
}
退出移动版