和我一块儿学习Webpack4.0（一） —— 初识Webpack

1、Webpack是什么？

Webpack is a module bundler. It packs CommonJs/AMD modules i. e. for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand.
这一段是官网的介绍，翻译过来就是Webpack是一个模块打包工具。它能够打包CommonJs/AMD等浏览器不能直接支持的模块化标准。它可让你把代码拆分红多个包，可实现按需加载。

2、环境搭建

1.node.js和npm

这个没什么多说的了，官网下载安装node.js便可，同时npm也会自动装好。

2.npm初始化

npm init

初始化过程当中会让你填许多信息，不想填的话直接在命令后面加上-y会自动生成package.json文件。

3.安装webpack

webpack有两种安装方法，一个是全局安装，一个是本地安装。官方推荐本地安装，实际上本地安装是比较合理的，由于若是两个不一样的项目用到的webpack版本不一样的话，全局安装没法知足需求。

npm install webpack webpack-cli -D

webpack-cli的做用是让咱们能够在命令行中正确的使用webpack这个命令。

若是想查看本地项目的webpack版本：

npx webpack -v

npx这个命令会帮咱们在当前项目的node_modules目录下去找webpack。

3、简单示例

首先我在npm init后的目录中建立3个文件：

• index.html
• index.js
• module.js

// index.js

import a from './module'

console.log(a)

// module.js

const a = 123

export default a

在index.html引入index.js，而后用浏览器打开，发现报错了。这是由于浏览器没法直接识别ES6 module的语法。

此时咱们使用命令：

npx webpack index.js

会发现根目录下生成了一个dist文件夹，里面有一个main.js文件，在index.html引入这个main.js后再打开浏览器，发现控制台打印了123。

这样咱们就看到了webpack的做用，webpack能够帮咱们打包浏览器没法识别的模块化语法，让咱们能够把代码分割成一个一个的包的形式。

4、配置文件简单介绍

在简单示例中咱们没有配置任何东西webpack也打包成功了，这是由于webpack有默认的打包配置，当项目变得很是复杂的时候，咱们须要许多配置项来帮助咱们，默认的配置文件名为webpack.config.js，在根目录下建立：

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

这样配置之后使用npx webpack就可让webpack按照本身指望的样子打包了。

若是配置文件名不想用webpack.config.js，可使用：

npx webpack --config 配置文件名

咱们用webpack打包时一直有一个警告，是由于咱们没有指定mode，mode能够选择'production'和'development'，默认为'production'，区别就是打包出来的文件是否压缩。