Webpacke常见错误的解决办法

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

项目列表

1、安装webpacke
//在本项目中安装webpack，–save-dev的意思是将依赖写入项目的package.json文件
npm install --save-dev webpack

安装过程中如果出现类似上述的提示，说明安装的版本不对，根据提示安装对应的版本
npm install --save-dev [email protected]
此时，运行webpacket -v会显示不是内部命令，说明webpacket没有安装成功

解决方法：
D:\te>npm install -save-dev webpack-cli
D:\te>npm install -global webpack
D:\te>npm install -global webpack-cli

说明webpacke安装成功

2、配置webpacke配置文件
（1）在项目的根目录创建webpack的配置文件webpack.config.js

（2）在根目录创建在 .babelrc文件

安装安装并启用webpack-dev-server
输入npm install --save-dev webpack-dev-server

3、常见问题的解决方案
（1）此时查看预览效果，出现下面的警告，说明项目打包进文件失败

解决方法：
项目目录下输入：
D:\te>webpack -mode development
D:\te>webpack -mode production

此时，在package.json文件中会出现
“scripts”: {
“start”: “webpack”,
“dev”: “webpack --mode development”,
“build”: “webpack --mode production”
},
执行npm run dev,出现：

说明项目打包完成
（2）此时运行public/index.html文件，浏览器会出现错误提示

解决方案：
在webpacke的配置文件中加上webpack.HotModuleReplacementPlugin这个插件
即：
plugins: [
new webpack.HotModuleReplacementPlugin()
],
（3）ReferenceError: webpack is not defined
继续npm run dev，会出现ReferenceError: webpack is not defined：即：创建webpack配置文件后，运行webpack操作出错：

解决方案，在webpacke配置文件的第一行加入：var webpack = require(‘webpack’);

至此，就可以正常的访问public下的index.html了

上述步骤仅仅完成入口文件为普通js文件的配置

https://blog.****.net/omeletteyang/article/details/73477354
https://blog.****.net/qq_36256944/article/details/80672256
https://blog.****.net/MonkeyBrothers/article/details/81590572
https://blog.****.net/GAOGAO_94/article/details/88930376