webpack4.x踩坑之路

什么是webpack?

作为一个前端积极分子，你对webpack一定不会陌生，无论你是学哪个框架都绕不过去webpack.，我这里目前安装的是最新版 v4.8.1，那到底什么是webpack呢，我们一起来探索吧！这是官方文档
这里写图片描述
看了上图，你应该可以了解一二，下面我们详细说一下：

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

安装webpack

这个是真心不容易，踩坑之路由此开始

默认你已经对node 和npm 安装并且熟练掌握了。如果你在开始之前已经安装过webpack或者出错好多次，不清楚自己电脑目前安装webpack的环境是什么样的建议删掉（npm uninstall webpack-g）

开始吧，骚年

首先新建一个文件夹webpack-demo(文件夹名无所谓，但不要起名为webpack)
然后打开命令行，进入该目录下

npm init -y

init -y 会帮我们在本地创建一个package.json 这个文件用来保存模块的依赖信息，以及以后的配置信息。这个是必须要有的，运行完成后会生成一个json文件如下

{
  "name": "webpack-dome",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

接着执行npm install webpack webpack-cli -g
npm webpack webpack-cli -g 用来下载webpack webpack-cli最新版本，后面的-g 是全局安装。为了使用方便建议全局安装和本地安装一起出现下面的图

说明全局安装成功了（这里我用的是淘宝镜像，所以是cnpm）
这里写图片描述
接着是本地项目安装cnpm install webpack --save-dev
因为 webpack4 是零配置所以我们直接启动一次看看在命令行列直接输入 webpack 然后回车

哇，一个警告，一个错误，先改错误吧
以前我们使用webpack，通常需要定义两个配置文件，一个用于开发环境，一个用于生产环境。
development中，我们用于通常要配置webpack-dev-server和一些杂七杂八的设置
production中，则需要配置UglifyJSPlugin, sourcemaps等
解决方式在我们的package.json文件中修改一下：

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

修改后的package,json文件

{
  "name": "webpack-dome",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
     "webpack": "^4.8.1",
  }
}

然后我们运行npm run dev
不出意外会出现下列提示
这里写图片描述
这个提示是想说CLI已经分成一个单独的包了：webpack-cli,然后给出了安装方法，我们就按照给的方法一步步安装吧。我们在本地安装并且把这个依赖保存到package.json中；即执行

cnpm install webpack-cli -D --save-dev

安装完成之后package.json应该是这样的：

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.8.1",
    "webpack-cli": "^2.1.3"    //这就是刚刚安装的
  }
}

然后运行npm run dev
这里写图片描述
好吧，接着安装需要的东西。。。（这里可能会不一样，按照提示所给的进行安装就行）
安装完之后在运行 npm run dev

如果出现这个，你可以稍微放松一下辣，证明终于不用安装依赖了。

这个错误警告是webpack4新增的因为我们是启动的零配置的项目所以他默认的入口会在 src 文件夹里的index.js 。但是我们项目里没有所以它就会给我报错说找不到这个入口文件。那么我们就要新建文件了

首先在webpack-dome文件里也就是所说的根目录新建一个文件夹命名未：src

然后在src 文件夹里新建个index.js 文件；

index.js文件里的js 就是一个输出语句document.getElementById('title').innerHTML='Hello Webpack';
根目录下新建一个文件加dist 在dist下建一个index.html,啥都没有，就一个这个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="title"></div>   //就是这两句
<script src="main.js"></script>//就是这两句

</body>
</html>

然后运行npm run dev
接着你会发现dist下多了一个main.js，这样你就算成功了并且简单实现了一个入门demo,可以运行一下inde.html,就会看见Hello Webpack

配置webpack-dev-server

有了上边的基础，这个就比较简单了。
1. 自然是安装webpack-dev-server

cnpm install webpack-dev-server --save-dev

2.packae.json中修改

 "scripts": {
    "dev": "webpack-dev-server --mode development",  //注意加上webpack-dev-server

  },

3.在webpack.config.js中配置

const path = require('path')

module.exports = {
//在原来基础上加下边这个就行
    devServer:{
        contentBase:path.resolve(__dirname,'dist'),
        // 设置服务器的ip地址，也可以是localhost
        host:'localhost',
        // 设置端口
        port:1717,
        // 设置自动拉起浏览器
        open:true
    }
}

4.npm run dev 运行，不会生成dist目录会自动拉起浏览器打开页面
这里写图片描述
出现这样就是成功了，然后会跳转至浏览器。OK

配置热更新
这个也比较简单
1.在webpack.config.js文件引入webpack模块

const Webpack = require('webpack');

2.在devServer中增加一个hot:true配置

devServer:{
    // 设置热更新,需要引入webpack模块
    Webpack.HotModuleReplacementPlugin(),
    hot:true,
  }

3.在plugins中配置

plugins:[
    // 配置热更新
    new Webpack.HotModuleReplacementPlugin()
    ]

ok 大功告成，真心不容易，好了，让我们开始学习webpack4.x吧！！

什么是webpack?

安装webpack

开始吧，骚年

配置webpack-dev-server

猜你喜欢