webpack安装

webpack

webpack：现代JavaScript程序应用的模块打包器。它主要分析你的项目结构，找到JavaScript模块以及其他一些浏览器不能直接运行的拓展语言（Scss、less、TypeScript），将其转换和打包为合适的格式供浏览器使用。

如何安装？

1. 在根目录文件夹下新建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/
      }
    ]
  }
};

2. 下载依赖包

npm install webpack --save-dev 

3. 运行代码

npm start

4. 如果运行代码期间发生了如图所示的问题：

   
   
   webpack.png
   
   

   该路径（这是全局路径）下卸载不符合版本的webpack 与 webpack-dev-server
   注意卸载webpack时还需要卸载webpack-cli ，4.0版本后的webpack都带有webpack-cli:
   解决办法如下：

• 1. 卸载webpack

npm un webpack
npm un webpack-cli
npm un webpack-dev-server

• 2. 重新安装webpack，版本号如上图圈出来的所示：

npm i [email protected]

• 3. 重新运行项目即可。