和我一塊兒學習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'，區別就是打包出來的文件是否壓縮。