I haven"t studied webpack for a long time. Recently, I began to learn the latest version of webpack when I was free. Webpack4, followed the steps of the official website step by step, but I made a mistake and asked for an explanation.
after installing some necessary modules, I installed jquery,package.json as follows:
{
"name": "vuetest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"sideEffects": false,
"scripts": {
"build": "webpack --config webpack.prod.js",
"start": "webpack-dev-server --open --config webpack.dev.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^0.1.19",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"jQuery": "^1.7.4"
}
}
webpack.config,js is configured as follows:
const path = require("path");
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const HTMLWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development",
entry: {
index: "./src/index.js"
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
},
plugins: [
new HTMLWebpackPlugin({
template: "index.html",
title: "Code Splitting"
}),
new CleanWebpackPlugin(["dist"]),
]
};
next I use jquery"s index,js, as follows:
import _ from "lodash";
import { cube } from "./math.js";
const $ = require("jQuery");
console.log($)
if(process.env.NODE_ENV) {
console.log(process.env.NODE_ENV);
}
function component() {
var element = document.createElement("pre");
var element2 = _.join(["Hello", "webpack"], " ");
console.log("a" + element2)
element.innerHTML = [
"Hello webpack!",
"5 cubed is equal to " + cube(5)
].join("\n\n");
return element;
}
document.body.appendChild(component());
I execute webpack, in the console and report an error. I don"t understand what the problem is. Please solve it (I even deleted all the modules, re-downloaded, uninstalled node.js, and reinstalled, all this mistake)