node中html引入jquery可以用webpack进行打包。
webpack 3可以打包,webpack 4 打包需要安装webpack-cli,否则会报错。
直接引入js会报错。语法错误,浏览器不支持ES6语法
Uncaught SyntaxError: Cannot use import statement outside a module
以前js不可以引入其他js,通过webpack可以
main.js引入jquery.js,main.js的代码
//导入jquery模块,用$做别名
import $ from 'jquery'
//使用jquery
$(function () {
$('li:odd').css('color', 'red');}
);
使用webpack进行打包。
打包有两种方式
- 指定文件进行包
webpack <源文件> <目标文件>
- 编写webpack项目配置文件,在项目目录下建立webpack.config.js
const path = require('path')
// path路径模块
module.exports = {
//entry:入口,指定要打包的是main.js
entry: path.join(__dirname, './src/main.js'),
//output:出口,指定打包生成在dist目录下生成bundle.js,项目中引入bundle.js 使main.js中jquery代码生效。在html代码中不能直接使用jquery
output: {
path: path.join(__dirname, './dist'),
filename: "bundle.js"
}
}
访问html文件,jquery即生效。