webpack4（模块打包工具）学习笔记（1）

1.项目目录

2.在使用npx webpack 打包的时候一直提示，（此处好像不能使用npx webpack index.js来打包）

原因：缺少webpack配置文件webpack.config.js（图1最下面的一个文件）

手动添加配置文件webpack.config.js，配置好之后，我们就可以使用npx webpack直接进行打包了（此处注意入口文件的路径，该项目的入口文件index.js在当前文件夹下，不是在src目录下）

// 在这里做打包配置
const path = require('path'); // 引入node的path模块（loader模块）
// Common.js语法
module.exports = {
  mode: 'development',
  entry: {
    main: './index.js'
  },
  output: {
    filename: 'bundle.js', // 打包之后的输出文件
    path: path.resolve(__dirname, 'dist') // 指打包的文件放到哪个文件夹下
  }
}

配置项代表的含义：

• mode : 打包的模式，有两个值（development和production），默认值为production, 可不写，但不写时打包命令运行时会有警告。主要区别在于：development模式打包之后的代码没有进行压缩，而production模式下，打包之后的代码会进行代码压缩。
• entry : 配置入口文件，入口文件对应的键名为main。可直接简写为–> entry: ‘./index.js’.
• output : 配置打包之后输出的文件，filename属性指打包之后的输出文件，path指打包文件所在文件夹的路径，这里要写绝对路径。node中的__dirname这个变量代表的就是webpack.config.js所在的文件路径（绝对路径）

 注：webpack默认的配置文件的名称为webpack.config.js, 一旦修改此名字，则当再次运行npx webpack时，会找不到配置项，而报错。如果想要修改配置文件的名字（比如把webpack.config.js修改为config.js），可通过npx webpack --config config.js来执行打包命令

最后打包结果如下

扩展：