webpack 4.X 安装及使用

WebPack4.X 使用指南
一、简介：
webpack是一个前端自动化打包工具，根据它的名字也很好理解，web-pack顾名思义就是前端打包工具；它的使用是基于Node和NPM的，所以在安装使用webpack之前，需要安装nodejs，nodejs的版本过低也不行，所以推荐安装nodejs版本为v8.11.2以上,npm版本为v5.6.0以上；

如何查看node和npm版本？
答：安装完毕nodejs之后，在命令行输入node -v和npm -v查看。

二、项目建立：
第一步：新建一个文件夹，命名为wp。

第二步：在cmd命令行中使用cd命令切入到wp文件夹中，输入npm init或npm init -y，初始化package.json文件；需要注意的是如果package.json的name为webpack可能会引起错误，所以name尽量避免输入为webpack。

如图：

第三步：将wp文件夹拖入到vscode , sublime等编辑工具中，并在wp根目录下新建一个webpack.config.js的文件。

webpack.config.js里面应该配置的项目如下：

module.exports = {
    entry: '',               // 入口文件
    output: {},              // 出口文件
    module: {},              // 处理对应模块
    plugins: [],             // 对应的插件
    devServer: {},           // 开发服务器配置
    mode: 'development'      // 模式配置
}

我们先做一个默认配置：

const path = require('path');

module.exports = {
    entry: './src/index.js',    // 入口文件
    output: {
        filename: 'bundle.js',      // 打包后的文件名称
        path: path.resolve('dist')  // 打包后的目录，必须是绝对路径
    }
}

及将上述所谓的默认配置代码粘贴到webpack.config.js文件中

解释： 所谓的入口文件entry和出口文件output指的都是.js文件，当前的配置是单个入口文件和出口文件，后面我们在配置多页面的时候回有多入口和出口文件。

第四步：根据第三步中的配置内容需要注意到两个路径和文件：

entry: './src/index.js',
 filename: 'bundle.js'
 path: path.resolve('dist')

'./src/index.js'的意思是在当前wp根目录下要新建一个src文件夹，里面，并且在里面新建一个index.js文件。（自行创建）

filename: 'bundle.js'和path: path.resolve('dist')的意思是最终打包完毕后会在wp根目录下自动创建一个叫dist的文件夹，里面包含一个bundle.js文件

打包前目录结构和代码：

第五步：接下来我们将根据第四步的内容进行打包，要想使用webpack打包，需要使用npm安装webpack 和 webpack-cli,在cmd命令行中输入：

npm install webpack webpack-cli --save-dev

如图：

 

安装完毕后修改package.json文件中的scripts，如下：

{
  "name": "wp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev" : "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
  }
}

然后在cmd命令行中输入npm run dev进行打包。

如下图：

打包后目录结构：

其中增加了一个dist文件夹，里面增加了一个bundle.js文件；这就是之前我们说的输出文件。

第六步:在src目录下新建一个index.html文件，里面引入打包后的bundle.js文件作为测试。

运行后的结果如下：

至此，基于webpack的项目建立好了