请问import语法除了能导入JS文件，还能导入其他类型的文件吗？例如css/png/less等

Question

问题

ES6的模块导入语法为：import
CommonJS的模块导入语法为：require

一直以来，我以为ES6中的import只能导入JS文件，

import {myExport} from '/modules/my-module.js';

但当使用Webpack对项目进行打包时发现：
在JS文件中也能使用import导入css文件

import '/modules/index.css';

所以想问问各位大神以下几个问题：

1、请问ES6的import导入语法，是否原本已经支持导入非JS文件，例如导入css、图片、视频、音频等
2、webpack的import是否和ES6的import一样呢？还是对ES6的import语法的增强呢？（例如能导入非JS文件）

Answer 1

module-name
要导入的模块。这通常是包含模块的 .js 文件的相对或绝对路径名，不包括 .js 扩展名。某些打包工具可以允许或要求使用该扩展；检查你的运行环境。只允许单引号和双引号的字符串。
-- import | MDN

Answer 2

nodejs的import与ES6的import不完全一样，经过babeljs后会被编译为require

Answer 3

可以导入其它文件，是因为webpack在打包时，会编译js文件，对于不同文件使用可不同的加载器，并非module本身支持的。
webpack加载器解释教程：https://www.webpackjs.com/con... ,

例如：
module: {

rules: [
  { 
    test: /\.js$/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env']
      }
    } 
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: path.posix.join('lib', '/img/[name].[hash:7].[ext]')
    }
  },
  {
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: path.posix.join('lib', '/media/[name].[hash:7].[ext]')
    }
  }
]

}

Answer 4

你这样理解，ES6 使用的 import 导入模块，所有文件都是模块，一个文件代表一个模块，而不管文件里面的内容是图片还是css其他的类型，webpack 都会把它们转换成 js，可以被浏览器识别。