webpack4 快速上手

一、初识webpack

什么是webpack?官网介绍是 module bundler, JavaScript 的模块打包器，大概意思就是，能够将一堆关系错综复杂的 .js, .css, .sass 等文件，打包成几个静态的文件，在 html 里面直接插入实用，webpack中包含了gulp自动打包工具、包含了babel转es5压缩等...

另外，Webpack4正式发布以后。只要使用npm install webpack命令，默认安装的就是版本4。webpack3和webpack4的搭建区别还是挺大的，丢哥在这里提醒大家如果对版本的变更不是很了解的情况下，就会被网上各种Webpack的教程弄混淆，特别是一些通过视频学习的同学看的是几年前的教程，使用的是Webpack3，这样就会导致各种无法预知的错误。

npm相关命令了解

初始化新项目
npm init
全局安装依赖包package，不属于具体哪个项目
npm install --global package
安装运行时依赖包PACKAGE，会打包至最终生成文件
npm install --save package
安装开发时依赖包package，不会出现在生产文件中(正式运营环境)。webpack就属于开发时用来打包文件，在运行时就不需要它了。
npm install --save-dev package
执行命令，具体命令配置在package.json中
npm run command
同时以上安装依赖命令也有简写模式
npm i -g package
npm i -S package
npm i -D package

二、安装webpack

首先要安装 Node.js， Node.js 自带了软件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建议使用最新版 Node.js，全局安装webpack

$ npm install webpack -g    #全局安装webpack

此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。

通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。

$ mkdir demo    # 创建一个demo目录

$ cd demo

$ npm init		# 初始化一个项目，生成package.json

# 安装webpack与webpack-cli
$ npm install --save-dev webpack
$ npm install --save-dev webpack-cli

同时检查，package.json文件中"devDependencies"本地配置中会新增webpack和webpack-cli的配置文件，如果有，那么成功了。

二、打包实现

mkdir src    # 创建src目录

在src/index.html中写入：

<!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="../dist/bundle.js"></script>
</body>
</html>

在main.js中写入：

// main.js

document.write('It works for main.js')

在package.json中配置scripts【dist文件夹和bundle.js会自动生成】：

"scripts": {
   "build": "webpack ./src/main.js -o ./dist/bundle.js --mode development"
  },

最后在终端中使用如下命令：

npm run build  # 使用webpack进行打包了

三、webpack.config.js配置

这里具体的部分不做详细的解释，大家可以参考下面的代码，同时结合webpack官方文档进行学习，相信进过此番学习，大家可以掌握webpack的基本使用方法。

// 这是webpack的配置文件，当 npm run build 会自动找webpack.config.js
// 这个配置未见时运行在node环境下的，这个配置文件书写方法是node.js语法

const path = require("path");

module.exports = {
        //入口文件
        entry: path.join(__dirname, "./src/main.js"),
        //出口
        output: {
                //配置出口文件得目录
                path: path.join(__dirname, './dist'),
                filename: 'bundle.js'
        },
        mode: "development",
}

四、常用插件

package.js文件如下：这样给大家一个参考，哪些是需要本地安装（–save-dev）的，哪些是需要依赖生产环境安装的（–save）。各种类型文件的安装的具体指令都可以参考webpack官方文档，文档中都写得比较清楚。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",    # 当项目需要上线的时候，使用npm run build可以生成生产环境下的相关文件。
    "dev": "webpack-dev-server"    # 在项目开发过程中使用npm run dev 可以实现自动更新页面的效果，但是仅供项目开发过程中使用，因为无法生成生产环境下的相关文件。
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^3.1.0",
    "file-loader": "^4.1.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "style-loader": "^0.23.1",
    "url-loader": "^2.1.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.5.1",
    "webpack-dev-server": "^3.7.2"
  },