webpack的基础使用（一）

webpack基本概述

• webpack 是一个流行的前端项目构建工具（打包工具），可以解决当前 web 开发中所面临的困境。 webpack
  提供了友好的模块化支持，以及代码压缩混淆、处理 js 兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。

webpack的安装、配置、使用

安装：

npm install webpack webpack-cli -D

配置1：在根目录创建webpack.config.js的配置文件

module.exports = {
    // mode 用来指定构建模式:生产阶段/开发阶段
    // devlopment开发模式：打包速度快，但是体积大
    // production生产模式：打包速度慢，但是体积小
    mode: 'development',
}

配置2：在 package.json 配置文件中的 scripts 节点下，新增 dev 脚本

"scripts": {
	"dev": "webpack" // script 节点下的脚本，可以通过 npm run 执行
}

运行：在终端中运行 npm run dev 命令，启动 webpack 进行项目打包。

webpack的其他配置

webpack 的 4.x 版本中默认约定：

• 打包的入口文件为 src -> index.js
• 打包的输出文件为 dist -> main.js
  如果要是修改默认的配置的话，就要在webpack.config.js的配置文件中添加设置

// 导入node中专门操作路径的模块
const path = require('path')

module.exports = {
    // 打包文件的位置
    entry: path.join(__dirname, './src/index.js'),
    // 输出文件的位置和文件名字
    output: {
        path: path.join(__dirname, './dist'),
        filename:'bundle.js'
    },
}

注意：在写代码的过程中，遇到的问题是npm run dev时会出错，这大概率和webpack的版本太高有问题,下载低版本的就行。