webpack
webpack：现代JavaScript程序应用的模块打包器。它主要分析你的项目结构，找到JavaScript模块以及其他一些浏览器不能直接运行的拓展语言（Scss、less、TypeScript），将其转换和打包为合适的格式供浏览器使用。
如何安装？
- 在根目录文件夹下新建webpack/webpack.config.js文件，内容如下：
const path = require("path");
module.exports = {
entry: path.resolve(__dirname, "../src/index.js"), //指定入口文件，程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录
output: {
path: path.resolve(__dirname, "../dist"), // 输出的路径
filename: "bundle.js" // 打包后文件
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: "babel-loader",
options: {
presets: ["es2015", "react"]
}
},
exclude: /node_modules/
}
]
}
};
- 下载依赖包
npm install webpack --save-dev
- 运行代码
npm start
-
如果运行代码期间发生了如图所示的问题：
webpack.png
该路径（这是全局路径）下卸载不符合版本的webpack 与 webpack-dev-server
注意卸载webpack时还需要卸载webpack-cli ，4.0版本后的webpack都带有webpack-cli:
解决办法如下：
- 卸载webpack
npm un webpack
npm un webpack-cli
npm un webpack-dev-server
- 重新安装webpack，版本号如上图圈出来的所示：
npm i webpack@4.41.5
- 重新运行项目即可。
