webpack安装的方式&webpack配置文件打包时的命令

 安装webpack

1. 运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令

2. 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

3. webpack4.0以后版本，需要安装命令工具npm install webpack-cli -g

4. 查看webpack 信息 npm info webpack 4.0以后 直接输入该命令： webpack -v

使用webpack的配置文件简化打包时候的命令

1. 在项目根目录中创建webpack.config.js

2.由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径：

单进单出

   // 导入处理路径的模块
    var path = require('path');

    // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
    module.exports = {
        entry: path.resolve(__dirname, 'src/index.js'), // 项目入口文件 __dirname当前模块目录名
       
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        },
       
    }

在目录下直接使用 webpack命令打包

多进多出

var path = require('path');
module.exports = {
    entry: {
        index: './src/main.js',
        print: './src/main2.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].index.js"
    }

}

多进单出

    var path = require('path');
    module.exports = {
         // 入口文件存入输入当中
         //统一打包为 finame后面的文件名
          entry: [
              path.resolve(__dirname, './src/index.js'),
              path.resolve(__dirname, './src/index2.js'),
          ],
          output: {
              path: path.resolve(__dirname, 'dist'),
              filename: 'bundle1.js'
          }
      }

最后引入打包好的js文件即可