webpack使用详解

官网

　　官网：https://webpack.js.org

　　中文网：https://www.webpackjs.com

一、介绍

　　从webpack4.+进行介绍，会对Webpack常用配置一一讲解，各个功能点都有对应的详细例子，你如果能动手跟着本文中的例子完整写一次，你会觉得Webpack也不过如此。

1.1、webpack是什么

　　webpack是一种前端资源构建工具(模块打包器)，一个静态模块打包器.在webpack看来，前端的所有资源文件(js/json/css/image/less/sass...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。

从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目，然而，它仍然有着高度可配置性，可以很好满足你的需求。
配置文件: webpack.config.js

1.2、webpack都能干些什么

1.3、webpack五个核心概念

mode 模式　　 development / production ，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

entry 入口本项目应该使用哪个模块，来作为构建其内部依赖图的开始（指定打包入口文件）

output 输出在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist

loader loader 让webpack能够去处理那些非js文件(webpack自身只理解js)

plugins 插件　　则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

二、简单案例

2.1、准备工作

1、首先：webpack是运行在node环境中的，Node >= 8.10 和 npm >= 5.6（node环境链接：https://nodejs.org/en/ 直接下载电脑对应的版本即可。）

　　1、接下来新建项目文件夹这里我起名为：webpack_project

　　2、打开终端切换到项目文件夹下

　　3、执行命令初始化项目生成package.json：　 npm init -y

　　4、执行命令下载webpack与webpack-cli依赖： npm i -D webpack webpack-cli

　npm init -y

　npm i -D webpack webpack-cli

　　tips:

　　　　install　　　可简写为　　i,

　　　　--global　　　可简写为　　-g,

　　　　--save-dev　　可简写为　　-D

　　　　--save　　　　可简写为　　-S

2、检查是否安装成功

　　这里注意一下版本有些版本会遇到一些坑，若运行不起来，可以复制我这个版本放到对应的位置上，然后npm i初始化一下

3、使用npx来完成本项目中的命令执行

npm webpack --version

4、在package.json文件中配置webpack运行脚本命令

执行命令 npm run build

2.2、新建

webpack_project 中创建src，dist文件夹，接下来再创建三个文件:

index.html 　　--放在dist文件夹中；

hello.js 　　  --放在src文件夹中；

index.js　　   --放在src文件夹中；

我们在index.html中写下html代码，它的作用是为了引入我们打包后的js文件：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Webpack Project</title>

</head>

<body>

    <div id='root'></div>

    <script src="bundle.js"></script>   <!--这是打包之后的js文件，我们暂时命名为bundle.js-->

</body>

</html>

我们在hello.js中导出一个模块：

// hello.js

module.exports = function() {

    let hello = document.createElement('div');

    hello.innerHTML = "Long time no see!";

    return hello;

  };


然后在index.js中引入这个模块（hello.js）:

//index.js

const hello = require('./hello.js');

document.querySelector("#root").appendChild(hello());

2.3 通过配置文件来使用webpack

在当前项目的根目录下新建一个配置文件webpack.config.js，我们写下如下简单配置代码，目前只涉及入口配置（相当于我们的index.js，从它开始打包）和出口配置（相当于我们打包生成的bundle.js）。

// webpack.config.js

module.exports = {
　　　mode:'development',

    entry: __dirname + "/src/index.js", 　　// 入口文件

    output: {

        path: __dirname + "/dist", 　　　　//打包后的文件存放的地方

        filename: "bundle.js" 　　　　　　//打包后输出文件的文件名

    }

}
//注：__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录，即C:\Users\sjt\DeskTop\webpack-project（这是我当前的目录）

但平时我们看到的脚手架配置也比较喜欢采用node.js的path模块来处理绝对路径，所以我们也可以采用如下的写法，和上述的效果是一样的：

// webpack.config.js

const path = require('path');

module.exports = {
　　 mode:'development',　　　　　　　　　　　　　　　　//开发环境

    entry: path.join(__dirname, "/src/index.js"), // 入口文件

    output: {

        path: path.join( __dirname, "/dist"), 　　//打包后的文件存放的地方

        filename: "bundle.js" 　　　　　　　　　　  //打包后输出文件的文件名

    }

}
//注：path.join的功能是拼接路径片段。

扩展：这里再讲一下 filename 扩展写法

output: {   //项目出口

        path: path.resolve('dist'),  // 打包生成路径  绝对路径

        /*

            打包名称

                filename:'js/[name]-[hash:8].js'

                [name]文件名称变量 默认main

                [hash]生成不重复字符串 :8 一般最少六位

         */

        filename: 'bundle-[hash:8].js'

    },

2.4 开始进行webpack打包

在终端中使用命令进行打包：

npm run build   ---这里前提是我们在 2.1第四步中package.json配置了"build":"server"
　　　　　　　　　　注意：package.sjon 文件内不能用注释，不能单引号

上述就相当于把src文件夹下的index.js文件打包到dist文件下的bundle.js，这时就生成了bundle.js供index.html文件引用

　运行结果：

三、基本开发环境配置

为了让我们的项目看起来更像真正的公司项目，这里我们要配置生产和开发环境两个版本，方便在以后的项目开发中针对不同的环境进行打包。

3.1、配置基本开发环境

　　1、在项目根目录中创建一个config目录，专门用于存放webpack的相关配置文件

　　　　dev：生产环境

　　　　prod：开发环境

　　　　这里由于配置文件修改　　enrty入口与　　path输出位置　　也要做相应调整　　

　　2、在package.json文件中的scripts自定义命令中修改webpack打包命令

   "build-dev": "webpack --config ./config/webpack.config.dev.js",

   "build": "webpack --config ./config/webpack.config.prod.js"

　　3、运行成功：

3.2、html-webpack-plugin插件

首先根目录下面创建一个public目录，并在此目录中创建一个index.html文件，使用 html-webpack-plugin插件，可以将此文件用于项目web入口文件模块。

1、设计与回顾

　　为了把上面的内容更好地吸收，我们重新撸一下思路。

　　第一步：创建项目 webpackProject

　　第二步：生成package.json　　

　　　　　　打开终端切换到 webpackProject工程下（win+r 输入cmd可以快速打开终端）

　　　　　　执行命令:　　npm init -y

　　第三步：下载webpack相关依赖　　

　　　　　　执行命令：npm i -D webpack webpack-cli

　　　　　　版本参考："webpack": "^4.44.2", "webpack-cli": "^3.3.12"

　　第四步：新建子文件

　　第五步：webpack.config.dev.js内书写打包内容（这里稍稍有些区别）

const path = require('path');

module.exports = {

    mode: 'development',　　　　　　　　　　　　　　　　//开发环境

    entry: "./src/index.js", // 入口文件

    output: {

        path: path.resolve('dist'), 　　//打包后的文件存放的地方

        filename: "[name]-[hash:8].js" 　　　　　　　　　　  //打包后输出文件的文件名

    }

}

！！从现在开始是新的内容　　

　　第六步：安装html-webpack-plugin　　( 版本："html-webpack-plugin": "^4.4.1",)

　　　　　　执行命令：npm i -D html-webpack-plugin

　　第七步：webpack.config.dev.js中配置　　html-webpack-plugin

// 1、HWP引入

const HtmlWebpackPlugin = require('html-webpack-plugin')

const path = require('path');

module.exports = {

    mode: 'development',　　　　　　　　　　　　　　　　//开发环境

    entry: "./src/index.js", // 入口文件

    output: {

        path: path.resolve('dist'), 　　//打包后的文件存放的地方

        filename: "[name]-[hash:8].js" 　　　　　　　　　　  //打包后输出文件的文件名

    },

    // 2、HWP使用

    plugins:[

        new HtmlWebpackPlugin({

            title:'welcome Webpack',

            template:path.resolve(__dirname,'../public/index.html')

        })

    ]

}

//注：path.join的功能是拼接路径片段。

/*

    path.resolve(__dirname,'../public/index.html')

    相当于

        cd config

        cd ..

        cd public

        cd index.html

*/

# 模板中使用定义的title index.html

四、构建本地服务器

现在我们是通过打开本地文件来查看页面的，看起来总感觉比较low，看别人用vue，react框架时都是运行在本地服务器上的，那我们能不能也那样呢？那必须的！

4.1 webpack-dev-server配置本地服务器

　　1、安装相关依赖　　npm i -D webpack-dev-server

　　　　配置参数说明：

　　　　contentBase:'文件位置'　　　　打包服务器所在位置有变化从新reload　

　　　 watchContentBase: true, 　　忽略文件，一版git忽略相关文件

　　watchOptions: {ignored: /node_modules/},

　　　　port:'8080'　　　　　　　　　　端口号，不写默认8080

　　　　host:'localhost'　　　　　　　　域名

　　　　open：true　　　　　　　　　自动打开浏览器　

　　　 clientLogLevel: 'none', 　　　　不显示启动日志

　 quiet: true, 　　　　　　显示基本信息，其余不展示

　 overlay: false, 　　　　错误不全屏显示　

　　　　inline: true, 　　　　文件修改后实时刷新

　historyApiFallback: true, 　　不跳转

compress: true, 　　　 gzip压缩

　　 2、配置webpack.config.dev.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

const path = require('path');

module.exports = {

    mode: 'development',　　　　　　　　　　　　　　　　//开发环境

    entry: "./src/index.js", // 入口文件

    output: {

        path: path.resolve('dist'), 　　//打包后的文件存放的地方

        filename: "[name]-[hash:8].js" 　　　　　　　　　　  //打包后输出文件的文件名

    },

    plugins: [

        new HtmlWebpackPlugin({

            title: 'welcom to Webpack',

            template: path.resolve(__dirname, '../public/index.html'),

        })

    ],
　　//1、webpack-dev-server相关配置

    devServer: {

        contentBase:path.resolve(__dirname,'../dist'),//服务器所在位置

        //忽略文件

        watchContentBase:true,

        watchOptions:{

            ignored:/node_modules/

        },

        port:'8088',            //端口号

        host:'localhost',       //域名

        open:true,              //自动打开浏览器

        clientLogLevel:'none',  //不显示启动日

        quiet:true,             //显示基本信息，其余不展示

        overlay:false,          //错误不全屏显示

        //解决跨域

        proxy:{

            '/api':{

                target:'http://localhost:3000',

                pathRewrite:{

                    '^/api':''

                }

            }

        }

    }

}

//注：path.join的功能是拼接路径片段。

/*

    path.resolve(__dirname,'../public/index.html')

    相当于

        cd config

        cd ..

        cd public

        cd index.html

*/

　　3、配置package.json文件件

 "server":"webpack-dev-server --config ./config/webpack.config.dev.js"

　　　　注意：json文件中不能用‘’单引号，不能写注释

　　4、终端运行 npm run server