玩转webpack

提起webpak,首先你需要知道webpack到底是什么?

• webpack是基于nodejs静态模块化的打包器,除了打包代码还具有翻译和压缩的功能
• 再使用webpack之前要先使用下面代码初始化文件,生成package.json文件
  -npm init -y
• 现在就可以开始安装webpack了
  npm i webpack webpack-cli -D

前端很多悲惨故事，都是是从版本不一致开始的。
采用局部安装的方式来安装它，注意，它只是一个开发依赖，并不是生产依赖，所以在命令行中加上-D。

• 安装成功后可以下面来通过命令行工具来检查是否安装成功。

# 方式一：
node_modules\.bin\webpack -v
# 方式二：
npx webpack -v

1. 由于webpack并不是全局安装的，所以并不能直接使用webpack -v来做检验。
2. npx是npm5.2之后提供的新功能。可以通过npx -v来检测它的版本。 在这里，我们通过它来调用项目安装的模块，它在运行时会在node_modules/.bin中去检查命令是否存在。

• 使用webpack来做打包

npx webpack ./index.js
# 或者是
node_modules/.bin/webpack index.js

如果没有遇到错误，会看到类似的结果如下：

• webpack的配置文件
• 创建并使用默认配置文件
  在项目根目录下创建一个名为webpack.config.js。其内容如下：

module.exports = {

  mode: 'development', // 打包方式

}

这个文件的意义是导出一个配置项：用来对webpack的打包行为做设置。在操作层面，就是学习如何去使用这个文件。

设置入口和出口–在配置文件中，配置自定义的入口和出口

在webpack中，默认的入口和出口分别是：

● 默认入口是：./src/index.js
● 默认出口是：./dist/main.js。

也就是说，如果直接在根目录下运行webpack，它会直接去找.src下的index.js，并把打包之后的代码放在dist/main.js下。

文件夹结构如下

设置入口文件

需求：如果在实际开发中，希望：
● 这个入口文件不是index.js，而是main.js
● 整体js文件不是放在src目录下，而是src/js下。

解决:
(1) 调整目录结构如下：

(2) 然后，修改配置项

1. 修改src/index.js的名字为src/js/main.js
2. 在webpack.config.js的配置项中添加 entry项

module.exports = {
  mode: 'development', // 打包方式
  entry:'./src/js/main.js' // 入口文件
}

3.重新打包，测试。

指定出口文件

在webpack.config.js中设置output项。
目标： 把出口文件设置为在build目录下的bundle.js

// 引入nodejs中的核心模块
const path = require('path') 
console.log(path.join(__dirname,'/build'))
module.exports = {
    mode: "production",
    entry: './src/js/main.js', // 入口文件
    output: {
        "path": path.join(__dirname,'/build'), // 决定出口文件在哪里
        "filename": "bundle.js" // 设置出口文件的名字。默认情况下，它叫main.js
    }
}

说明：
● output中的filename用来指定打包后的文件名字。
● output中的path用来指定打包后的路径。注意：它必须是绝对路径。所以，这里引用path模块中的join和__dirname来生成绝对路径。
● 如果path中的路径不存在，它会自动创建。

• 修改打包模式

webpack.config.js中的mode项用来设置打包的方式，如果不设置，会默认为production。

module.exports = {
  mode:"development"
}

webpack给mode 提供了两个模式:
● development :开发模式(代码不会压缩 混淆)
● production:生产模式（压缩，混淆，加密… 不可读）

production:生产模式（压缩，混淆，加密… 不可读）
在打包时指定配置文件

module.exports = {
  output:{
    filename:'boundle.js'
  }
}

下面，希望使用这个配置文件中的设置来打包。
它的格式是：

npx webpack --config webpack的配置文件

运行命令：

npx webpack --config webpack.dev.js

简化打包命令
可以在package.json中添加script命令来快速启动webpack，格式如下：

"scripts": {
"自定义命令名": "要具体执行的代码",
}

• npm run dev 来运行,大大的简化了代码

最后在补充几个常用的loader

1.  npm i css-loader -D
修改webpack.config.js文件，添加module
module:{ // 处理非js模块
    rules:[ // 规则
     {
        test: /\.css$/, 		// 正则测试
        use: ['css-loader'] 	// loader
      }
    ]

再次打包
它不会报错。但是，页面上也并没有出现样式的效果。打包之后的文件中并没有包含css代码。
css-loader只是能让你在.js中通过import来引入.css，如果你希望引入的css代码最终以style标签的方式插入到html页面中，则还需要安装一个loader:style-loader

npm i style-loader -D 

修改webpack.config.js文件
rules:[ // 规则
      {
        test: /\.css$/, 		// 正则测试
        use: ['style-loader','css-loader'] 	// loader
      }
    ]
    

还处理less的,可以戳下面网站
https://www.webpackjs.com/loaders/less-loader/#%E5%AE%89%E8%A3%85

好了今天的分享到这啦