webpack01------基本配置

引言
搭建webpack的环境
webpack的配置文件
mode选项

引言

webpack的核心定义是一个模块打包工具。

webpack最初是一个js模块打包工具，随着webpack的不断发展，它可以处理除js文件之外的其他文件css,img,less,scss,html,所以给它的定义是一个模块打包工具。

webpack支持模块引入方式：

• ES module（推荐） 引入 import xx from 'xxx' 导出 export default
• CommonJS （推荐）引入 const xx = require('xx' ) 导出 module.exports
• AMD
• CMD

---

搭建webpack的环境

webpack是基于node开发的,所以构建webpack的时候 nodejs是必不可少的。

1.创建node规范的项目会生成一个package.json文件

npm init -y 快速生成一个package.json配置文件

2.安装webpack

1.全局安装（不推荐）

npm install webpack webpack-cli -g

卸载
npm uninstall webpack webpack-cli -g

注意！ 不推荐是因为如果安装到全局的话，每个项目都只会用全局的同一版本，假如有多个项目依赖于webpack的不同版本来打包的话，那么这样就会有问题。

---

2.局部安装（推荐）

npm install webpack webpack-cli -D

安装完成后如何查看webpack的版本呢？因为本地根本就没有安装webpack，直接运行webpack -v一定是不起作用的。
第一种方式（不推荐但需要了解）：

npm i webpack -D      //非全局安装

//如果要执行 webpack 的命令

./node_modules/.bin/webpack -v

全局没有安装 我们会找到依赖中的文件位置来执行，这样写没毛病，但很费事。

npm5.2.x以上的版本就开始自动安装了npx,那么我们可以这样写： npx webpack -v

e:\studyCode\webpack\02> npx webpack -v   这里
npx: installed 1 in 2.179s
Path must be a string. Received undefined
e:\studyCode\webpack\02\node_modules\webpack\bin\webpack.js
4.39.1

npx 会自动查找当前依赖包中的可执行文件
所以以后不同的项目依赖不同的webpack版本也不用担心了，我们只需要去执行当前项目的webpack就可以啦~~~~

---

webpack的配置文件

webpack默认的配置文件是webpack.config.js

webpack.config.js
----------------------------------
const path = require('path');

module.exports = {
  entry:'./index.js', //入口
  output:{ //出口
    filename:'bundle.js',//输出文件的名称
    path:path.resolve(__dirname,'bundle') //path必须是一个绝对路径
  }
}

这是一个最基础的配置

如果想改变webpack的默认的配置文件名称，那么我们可以这样做：

npx webpack --config webpackxxxxx.js

这样webpack打包的时候就会去执行webpackxxxxx.js来进行打包，66666~~~

配置到package.json中

but,我们虽然了解了npx这个命令并且很好用，但接触过vue和react项目的小伙伴，都知道打包的时候只需要运行下 npm run build就行了，那么我们来改动一下package.json文件

package.json文件
-----------------------------------

"scripts": {
    "build":"webpack" 
  }

package.json文件中的script字段里面的任何值都可以使用npm run xxx 来执行,比如：npm run build ===> 执行webpack
这里可能有疑问？全局没安装webpack 这里是不是应该写成 npx webpack呢,在package.json文件中设置，它会先去找项目中的依赖有没有webpack，如果有就会去执行项目中的webpack，也就是局部的webpack 相当于npx webpack。

---

mode选项

当我们每次打包的时候，如果没有配置mode属性话会有以下的提示信息

mode有3个值：

• development(开发环境)
• production（生产环境）
• none

开发模式下 打包的时候代码不会进行压缩

module.exports = {
  mode:'development'
}

生产模式下 打包的时候代码会进行压缩

module.exports = {
  mode:'production'
}

我们也可以在package.json中进行配置： --mode=development/production

{
 "scripts": {
    "dev": "webpack-dev-server --mode=development ", 运行的是时候是开发模式
    "build":"webpack --mode=production", 打包的时候是生成模式
  },
}

一旦配置完mode之后，我们就可以通过process.env.NODE_ENV;来获取当前环境（development/production）

---