webpack篇(一)：基础配置

初始化项目

npm init -y

安装相关依赖，注意：下载 webpack-cli 源地址必须是npm的

npm i webpack -D
npm i webpack-cli -D

项目根目录中创建 webpack.config.js 文件

const path = require('path')

module.exports = {
  mode: 'development', // 表示处于开发阶段
  entry: './src/index.js', // 入口文件,
  output: {
	filename: 'js/bundle.js', // 打包生成的文件名
	path: path.resolve(__dirname, 'dist') // 打包后文件存放的目录
  }
}

此时你需要再根目录的 src 目录下创建 一个入口文件 index.js，当你运行以下命令时，会生成一个dist目录，该目录中的bundle.js文件就是你打包生成的文件

npx webpack --config webpack.config.js

项目中通常会有n多个js文件，如果都将他们引入index.js文件就可能造成单文件过大的问题，你可以通过对webpack.config.js中的一些配置进行一些修改

src 目录下添加一个test.js文件
src
|——index.js
|——test.js

const path = require('path')

module.exports = {
  mode: 'development',
  // 修改的内容····································
  entry: {
	'js/bundle': './src/index.js',
	'js/test': './src/test.js'
  },
  // 上面是修改的内容····························
  output: {
    // 修改的内容····································
	// filename: 'js/bundle.js',
	// 上面是修改的内容····························
	path: path.resolve(__dirname, 'dist')
  }
}

此时运行：

npx webpack --config webpack.config.js

发现dist目录中的js文件夹下生成了两个文件：test.js、bundle.js