账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack 配置
    52
    0

    问题描述

    webpack-dev-server 启动后html的后缀没了,难受

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    module.exports = {
        entry: {
            index: './src/index.js',
            about: './src/test.js'
        },
        output: {
            path: path.resolve('dist/static/'),
            //filename: '[name].js',
            filename: '[name].js',
            publicPath: 'static/'
        },
        plugins: [  //插进的引用, 压缩,分离美化
            new HtmlWebpackPlugin({  
                filename: process.cwd()+'/dist/index.html', 
                template: 'src/about.html',
                chunks: ['about', 'test']
            }),
            new HtmlWebpackPlugin({  
                filename: process.cwd()+'/dist/about.html', 
                template: 'src/index.html', 
                chunks: ['index']
            }),
            new CleanWebpackPlugin(['dist'], 
                {
                    root: process.cwd(), 
                    verbose: true, 
                    dry:      false    
                }
            ) 
        ],
        stats: { children: false },
        // devServer: {
        //     contentBase: process.cwd()+'/dist',
        //     port: 4200
        // }
    }

    启动命令

    webpack-dev-server --config ./config/webpack.base.js --port 4200  --content-base dist/

    文件目录

    .
    ├── config
    │   └── webpack.base.js
    ├── package.json
    ├── package-lock.json
    ├── remove
    │   └── dd.js
    └── src
        ├── about.html
        ├── index.html
        ├── index.js
        ├── other.js
        └── test.js

    运行效果
    图片描述

    问题描述

    about (magic html for about.js) (webpack-dev-server)应该是about.html
    里面的内容也是html就是没有.html的后缀

    求帮助

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 野心〃与梦想 普通会员 1楼

      Webpack 是一个用于构建、管理和优化 JavaScript 代码的模块打包器。它可以帮助开发者将他们的代码打包成最小化的、可重用的模块,这使得他们可以更容易地进行部署和维护。

      以下是一些基本的Webpack配置:

      1. 配置入口文件: 在 webpack 的配置文件(例如webpack.config.js)中,你可以设置入口文件。如果你有一个单独的 JavaScript 文件作为入口文件,你可以这样做:

      javascript module.exports = { entry: './src/index.js' }

      如果你有一个模块化的项目,你可能需要设置多个入口文件,例如:

      javascript module.exports = { entry: [ './src/a.js', './src/b.js' ] }

      1. 配置输出目录: Webpack 会将你的代码打包成一个可执行的文件,并将其放在指定的输出目录中。你可以通过设置输出目录来更改这个过程:

      javascript module.exports = { output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') } }

      1. 配置模块: Webpack 可以将模块打包成独立的可执行文件。你可以通过设置模块化选项来实现这一点:

      javascript module.exports = { module: { rules: [ { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } ] } }

      1. 配置插件: Webpack 提供了许多插件来帮助你更有效地处理代码。例如,你可以使用 webpack-dev-server 插件来在开发环境中运行你的应用:

      javascript module.exports = { devServer: { port: 8080, hot: true, historyApiLog: true } }

      以上只是一些基本的Webpack配置。根据你的项目需求,你可能需要设置更多的选项,例如处理 CSS、图片、模块等。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部