Webpack 基础(2).小试webpack

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、安装Nodejs

webpack是基于node来开发的，所以先安装node.js的环境。

1. node.js选择版本。
   node.js官网地址
   常识科普：LTS (Long Terms Support)：长期支持，推荐使用。
   （安装有问题的话，步骤可以看看别的博客）
2. 安装完了，看一下 node.js 和 npm 的版本号

node -v
npm -v

(常识科普：npm：node package manager，node包的管理工具。)
因为 webpack 是基于 node 开发的，所以我们安装 webpack 就需要通过 npm ，把webpack当成一个node的包来进行安装和管理。

二、安装Webpack

分为 全局安装 和 在本地工作目录安装webpack 和 webpack-cli
(常识科普：webpack-cli 表示我们可以在命令行里面执行命令)

1. 全局安装：

npm install webpack webpack-cli --global

查看版本号

webpack -v

2. 本地工作目录下安装（推荐）
   （1）安装npm包管理的配置文件

npm init -y

执行之后，会在项目根目录下创建一个package.json
（2）在本地安装 webpack 和 webpack-cli

npm install webpack webpack-cli --save-dev

整完了的项目结构

3. 运行webpack
   （1）准备工作
   在项目里面创建一个 hello-world.js 文件，在里面通过 export default helloWorld方法；（helloWorld方法就是打印了’helloWorld’）
   在index.js里面用impot导入helloWorld方法；
   （2）通过webpack打包
   在项目根目录下面执行webpack

webpack

可以看到dist文件夹里面创建了一个main.js文件，里面是index.js导入的helloWorld方法。

（3）查看打包信息
另外，可以通过下面的指令看到详细的打包信息，main.js

webpack --stats detailed

这时候main.js默认打包了index.js里面的模块，如果要自己修改入口文件的路径和文件名，就需要自定义 Webpack配置。

三、自定义Webpack配置

webpack-cli中有丰富的指令，可以通过以下指令查看，option中有很多可使用的参数。

npx webpack --help

以下为示例。

1. 通过命令行配置

npx webpack --entry ./src/index.js --mode production

但是这种方式并不直观，且不能保存我们的一些配置，因此webpack还提供了通过配置文件，去自定义配置参数的能力。

2. 通过 webpack.config.js 配置
   在项目根目录下创建webpack.config.js （这个文件名不能随便起，因为是webpack自动读取的），使用module exports去定义。
   ① webpack.config.js:

module export = {
	entry: './src/index.js', // *指定入口文件
    output: {
        filename: 'bundle.js', // *出口文件的名称
        path: './dist/' // *出口文件的路径
    }
}

② 执行

npx webpack

③ 修改一哈
嗯，会发现报错了，因为output.path应该是绝对路径，因此需要引入node.js的path，使用其resolve方法，传入_dirname和路径。_dirname表示webpack.config.js所在的本地目录路径，也就是根目录。

const path = require('path')
module export = {
	entry: './src/index.js', // *指定入口文件
    output: {
        filename: 'bundle.js', // *出口文件的名称
        path: path.resolve(_dirname, './dist') // *出口文件的路径（一定要设置成绝对路径）
    },
    mode: 'none' // 先不管，但是得有mode项
}

④ 在index.html里面看一哈

可以在浏览器控制台看到我们打印的hello-world，就成功了

总结