webpack本地服务 import 引入js 不写.js 如何识别

发布于 2022-09-13 00:45:57 字数 2624 浏览 29 评论 0

我使用webpack-dev-server在本地起了服务运行项目
我在js文件中通过import引入其他js文件

import config from './config';
import system from './system';

但这这样会提示找不到文件因为没有.js

如果加上.js就可以成功引入

import config from './config.js';
import system from './system.js';

我想实现vue react里那样不用写.js 也可以引用js文件
请问大佬们这该如何配置

webpack配置

const path = require('path');

module.exports = {
  resolve: {
    extensions: ['.js', '...'],
  },
  devServer: {
    openPage: 'html/webDome.html',
    open: true,
  },
  mode:'development'
};

感谢各位大佬，问题已解决，原因是一开始的配置只是使用webpack起了一个服务，run dev时根本没有用webpack编译

以下是修改后的webpak配置：

// const path = require('path');
const path = require('path')
const CopyPlugin = require("copy-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig={
    scriptLoading: 'blocking', // script 默认会带上defer
    filename: 'webDemo.html', // 默认是index.html
    template: './public/webDemo.html', // 如果觉得插件默认生成的hmtl5文件不合要求，可以指定一个模板，模板文件如果不存在，会报错，默认是在项目根目录下找模板文件，才模板为样板，将打包的js文件注入到body结尾处
    inject:'head', // true|body|head|false，四种值，默认为true,true和body相同,是将js注入到body结束标签前,head将打包的js文件放在head结束前,false是不注入，这时得要手工在html中加js
}
module.exports = {
    entry: './src/main', //main.js中的js可以省略，前面的./不能省
    output:{
        // filename:'./dist/[hash]app.js',
        // hashDigestLength: 8,
        filename:'build.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin(HtmlWebpackPluginConfig),
        new CopyPlugin({
            patterns: [
                {
                    from: path.join(__dirname, "public"),
                    to: path.join(__dirname, "dist"),
                    globOptions: {
                        dot: true,
                        gitignore: true,
                        ignore: ["**/webDemo.html"],
                    },
                }
            ],
        })
    ],
    devServer: {
      contentBase: path.join(__dirname, "public"),
      port: 9000,
      open:true,
      index:'webDemo.html', // 与HtmlWebpackPlugin中配置filename一样
      inline:true // 默认为true, 意思是，在打包时会注入一段代码到最后的js文件中，用来监视页面的改动而自动刷新页面,当为false时，网页自动刷新的模式是iframe，也就是将模板页放在一个frame中
    },
    mode: 'development'
}

文件目录：

main.js：
import './config/config' // 可以不加.js

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花开雨落又逢春i 2022-09-20 00:45:57

根据你提供的有限的信息,我试着还原一下你的项目结构.

根据http://localhost:8080/js/config可知项目下有个 js 文件夹,其中有个 config.js 文件.而你在 js 文件中通过import config from './config.js';去导入 config,那说明这个文件跟 config.js 同级,暂定为 index.js.然后根据你的 Webpack 配置,可知还有个 html 文件夹,里面有个 webDemo.html 文件.所以猜测你项目的结构如下:

而 html 文件大概是这样的

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Demo</title>
  </head>
  <body>
    <script src="../js/index.js" type="module"></script>
  </body>
</html>

你的 Webpack 配置里面没有定义 entry,那 Webpack 默认会使用src/index.js作为 entry,

基于以上猜测,那出现你所描述的问题,原因应该是如 @Meathill 描述的那样,你引用的 js 根本没有经过 Webpack 打包,而是通过浏览器原生支持的ES Module来实现的,所以你在 Webpack 中去配置extensions没有效果.

使用 Webpack 打包

要解决这个问题,你可以选择去配置 Webpack,让 js 代码通过 Webpack 打包,Webpack 会帮你解决后缀名的问题,你就可以愉快的使用import config from './config'了.

配置如下:

webpack.config.js中添加了entry配置

/**
 * @type {import('webpack').Configuration}
 */
const config = {
  entry: {
    main: './js/index.js',
  },
  resolve: {
    extensions: ['.js'],
  },
  devServer: {
    openPage: 'html/webDemo.html',
    open: true,
  },
  mode: 'development',
}
module.exports = config

webDemo.html修改了 src 路径,改成经过 Webpack 打包后生成的文件,路径为

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <script src="/main.js"></script>
  </body>
</html>

这里的/main.js中的main跟 Webpack 中entry下的配置一一对应,Webpack 里面的生成文件的名字有很多地方可以自定义,有兴趣的话,可以翻阅文档了解.

使用 ES Module Shims

使用ES Module Shims可以在浏览器原生的模块系统中实现类似 Webpack 中别名的功能,查看官方 GitHub 了解更多详情,示例如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <script src="https://unpkg.com/es-module-shims@0.12.2/dist/es-module-shims.js"></script>
    <script type="importmap-shim">
      {
        "imports": {
          "config": "../js/config.js"
        }
      }
    </script>
    <script type="module-shim">
      import { config } from 'config'
    </script>
  </body>
</html>

使用 Vite

最后强烈推荐尝试一下 Vite,开箱即用,速度极快,自带热加载...
虽然我没有实际在生产环境中用过,不过平常写个 Demo 什么的用起来很爽,直接安装一下就能用.

安装

yarn add -D vite
# or
npm install -D vite

运行

yarn vite
# or
npx vite

然后打开http://localhost:3000/html/webDemo.html查看效果

说实话,你直接把这些信息都提供出来多好,别人也不用靠一点点信息去猜了.你这看起来应该就是个 Demo,应该也没什么需要保密的,打包发个 GitHub,Gitee,CodeSandbox 之类的平台,别人分析起来也容易的多.
你提供的信息越多,别人解答起来越容易,也就有越多的人会给你解答,你也就能越快获得答案,这样多好.

回复收藏 0