解决js文件使用ES6语法import…from…导入jquery出现的问题，使用webpack

创建一个名为webpack–study的文件夹

其目录结构如下：

注：main.js在src目录下

右键webpack_study文件夹打开终端。

在终端中输入npm init –y

得到结果如下：

继续输入 npm i jquery -S 得到以下结果。

左侧webpack_study目录下会生成一个这样的文件：

在main.js和index.html分别中输入以下代码测试。

打开index.html文件查看控制台

提示以下错误：

Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:1:1)

查阅发现是ES6语法浏览器无法解析的问题，解决方法是在index.html中引入main.js的script标签里增加type=”module“。

但是浏览器依旧报错

Uncaught TypeError: Failed to resolve module specifier “jquery“. Relative references must start with either “/”, “./”, or “../”.

这是因为ES6新语法浏览器不识别，所以尝试使用webpack将main.js作为入口文件，在webpack_study->dist目录下创建bundle.js去作为输出口文件，然后通过webpack打包后引入。

在终端中输入webpack ./src/main.js ./dist/bundle.js

报错：

查阅发现应该是webpack配置的问题。

在当前目录下的node_modules下的package.json中修改,增加”dev“和”build“：

然后修改webpack.config.js文件，而webpack打包时并没有生成，于是在webpack_study下创建一个，然后将其中内容写为如下配置：

然后在终端输入webpack 测试：

成功运行，接着输入webpack ./src/main.js ./dist/bundle.js

检查bundle.js，发现webpack已经成功将输出内容到bundle.js中：

最后将index.html里链接main.js的script标签的src修改为dist目录下的bundle.js。

保存刷新index.html界面，检查控制台：

在main.js文件中一共输出了两个内容，均成功输出结果，$是一个回传函数，而window.$ 结果undefined的原因是因为导入的$不暴露在全局环境下。

成功在main.js中使用ES6语法导入jquery并且利用webpack打包让浏览器识别。

这样的优点在于可以避免使用script标签引入很多静态资源拖慢网页，可以将所有的js代码都放在一个main.js中，如果需要用到一些库的函数，直接import导入，再通过webpack输出到bundle.js文件中，调用时只用到这一个js文件。