1、资源：

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

github：https://github.com/webpack/webpack

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

深入浅出webpack电子书：http://webpack.wuhaolin.cn/

2、搭建WebPack开发环境

(1)、安装NodeJS

在用 Webpack 执行构建任务时需要通过 webpack 可执行文件去启动构建任务，所以需要安装 webpack 可执行文件。在安装 Webpack 前请确保你的系统安装了5.0.0及以上版本的 Node.js。

去https://nodejs.org/下载安装

(2)、安装webpack

安装方式如下：

npm i -g webpack

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

查看webpack版本，看看是否安装成功：

webpack -v

二、简单实例

2.1、创建一个项目

创建一个空项目，这里我使用WebStorm

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

项目结构：创建js、src目录

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

2.2、初始化项目

npm init -y

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

会生成package.json文件

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

2.3、安装webpack

webpack4需要安装webpack-cli：

npm i webpack webpack-cli --save-dev

2.4、创建目录与文件

src/bar.js

//定义模块
//部分依赖lodash中的join方法
import {join} from 'lodash'

//导出一个默认模块
export default function bar() {

    function component() {
        //创建div元素
        var element = document.createElement('div');
        //使用join连接数组将结果写入元素的html中
        element.innerHTML = join(['成功', 'webpack'], ' ');
        //返回
        return element;
    }
    document.body.appendChild(component());
}

实现使用lodash的join 连接字符串，在网页中输出字符串

依赖lodash、npm安装lodash

npm i lodash --save

生成node-modules目录

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

src/index.js

//入口文件
//导入自定义好的模块
import bar from './bar';
//调用
bar();

创建配置文件webpack.config.js

//webpack配置文件

//依赖node中的path模块
const path=require('path');

//定义一个默认模块对象
module.exports={
    //指定入口文件的位置
    entry:"./src/index.js",
    //设置输出结果
    output: {
        //路径，将相对路径转绝对路径
        path:path.resolve(__dirname,'dist'),
        //文件
        filename: "bundle.js"
    }

操作完成之后的目录结构：

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

2.5、使用webpack命令打包

可以指定配置文件

webpack --config webpack.config.js

也可以使用默认的配置文件

webpack

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

打包成功！结果

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

index.html

webpack创建dist文件在dist中生成打包文件，然后再index.html中引用index.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
　　
    <script src="dist/bundle.js"></script>
</body>
</html>

项目结构：

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

2.6、运行

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

三、深入了解webpack

3.1、入口(entry)、出口(output)

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。

多入口与多出口：

结合（二）中的实例：

创建src/app.js

//只是测试，弹出框
alert("App")

webpack.config.js

//webpack配置文件

//依赖node中的path模块
const path=require('path');

//定义一个默认模块对象
module.exports= {
    //指定入口文件的位置
    entry:{//多入口
        index:"./src/index.js",     //入口
        app:"./src/app.js"          //入口
    },
    //出口
    output: {
        //路径，将相对路径转绝对路径
        path: path.resolve(__dirname, 'dist'),
        //多出口[name]为占位符，取entry中的key
        filename: "[name].js"
    }
}

常用的占位：

[hash]：模块标识符(module identifier)的 hash
[chunkhash]：chunk 内容的 hash
[name]：模块名称，key的名称，非文件名称
[id]：模块标识符(module identifier)
[query]：模块的 query，例如，文件名 ? 后面的字符串

打包

webpack

结果：

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="dist/app.js"></script>
<script src="dist/index.js"></script>
</body>
</html>

四、模块转换器Loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

loader 是对应用程序中资源文件进行转换。它们是（运行在 Node.js 中的）函数，可以将资源文件作为参数的来源，然后返回新的资源文件。

资料：https://www.webpackjs.com/loaders/css-loader/

4.1、raw-loader（文件原始内容转换器）

安装

npm i --D raw-loader

创建.txt文件

src/text.txt

这是一个.txt文件

通过webpack.config.js配置、命令行或者内联使用 loader。

//webpack配置文件

//依赖node中的path模块
const path=require('path');

//定义一个默认模块对象
module.exports= {
    //指定入口文件的位置
    entry:{                         //多人口
        index:"./src/index.js",     //入口
        app:"./src/app.js"          //入口
    },
    //设置输出结果
    output: {
        //路径，将相对路径转绝对路径
        path: path.resolve(__dirname, 'dist'),
        //多出口[name]为占位符，取entry中的key
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /.txt$/,
                use: 'raw-loader'
            }
        ]
    }
}

src/bar.js

//定义模块
//部分依赖lodash中的join方法
import {join} from 'lodash';
import txt from './text.txt'

//导出一个默认模块
export default function bar() {

    function component() {
        //创建div元素
        var element = document.createElement('div');
        //使用join连接数组将结果写入元素的html中
        element.innerHTML = join(['成功', 'webpack',txt], ' ');
        //返回
        return element;
    }
    document.body.appendChild(component())
}

打包：

webpack

运行：

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

4.2、CSS Loader（样式处理）

安装

npm i style-loader css-loader -D

配置webpack.config.js

//webpack配置文件

//依赖node中的path模块
const path=require('path');

//定义一个默认模块对象
module.exports= {
    //指定入口文件的位置
    entry:{                         //多人口
        index:"./src/index.js",     //入口
        app:"./src/app.js"          //入口
    },
    //设置输出结果
    output: {
        //路径，将相对路径转绝对路径
        path: path.resolve(__dirname, 'dist'),
        //多出口[name]为占位符，取entry中的key
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /.txt$/,
                use: 'raw-loader'
            },
            {
                test:/.css/,
                use:['style-loader',{
                    loader: 'css-loader',
                    options: {
                        sourceMap:true
                    }
                }
            }
        ]
    }
}

src/css.css

div{
    background-color: aqua;
    line-height: 50px;
    font-size: 20px;
    border-radius: 20px;
}

src/bar.js

//定义模块
//部分依赖lodash中的join方法
import {join} from 'lodash';
import message from './text.txt';
import './css.css';

//导出一个默认模块
export default function bar() {

    function component() {
        //创建div元素
        var element = document.createElement('div');
        //使用join连接数组将结果写入元素的html中
        element.innerHTML = join(['成功', 'webpack',message], ' ');
        console.log(message)
        //返回
        return element;
    }
    document.body.appendChild(component())
}

打包

webpack

运行

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

注意事项

rules里的数据类型为对象，每一个loader都是一个对象
test表示loader要处理什么类型的文件，这里用了一个正则去匹配文件类型
use表示要使用哪个loader，它的值是个数组，loader的使用顺序是从后往前
这个loader的意思为，在入口文件里找到.css类型的文件，先拿css-loader去处理成浏览器认识的css，再拿style-loader把处理后的css放在页面的style标签里

4.3、sass-loader（加载和转译 SASS/SCSS 文件）

安装

npm i sass-loader node-sass --D

src/Scss.scss

$height:50px;
$color:#3366ff;

div{
  background: $color;
  height: $height;
  line-height: $height;
  color: rebeccapurple;
  padding-left: $height/5;
}

配置webpack.config.json

//webpack配置文件

//依赖node中的path模块
const path=require('path');

//定义一个默认模块对象
module.exports= {
    //指定入口文件的位置
    entry:{                         //多人口
        index:"./src/index.js",     //入口
        app:"./src/app.js"          //入口
    },
    //设置输出结果
    output: {
        //路径，将相对路径转绝对路径
        path: path.resolve(__dirname, 'dist'),
        //多出口[name]为占位符，取entry中的key
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /.txt$/,
                use: 'raw-loader'
            },
            {
                test:/.css/,
                use:['style-loader',{
                    loader: 'css-loader',
                    options: {
                        sourceMap:true
                    }
                }]
            },{
                test: /.scss$/,
                use: [{
                    loader: "style-loader" // 将 JS 字符串生成为 style 节点
                }, {
                    loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
                }, {
                    loader: "sass-loader" // 将 Scss 编译成 CSS
                }]
            }
        ]
    }
}

src/bar.js

//定义模块
//部分依赖lodash中的join方法
import {join} from 'lodash';
import message from './text.txt';
// import './css.css';
import './Scss.scss';

//导出一个默认模块
export default function bar() {

    function component() {
        //创建div元素
        var element = document.createElement('div');
        //使用join连接数组将结果写入元素的html中
        element.innerHTML = join(['成功', 'webpack',message], ' ');
        console.log(message)
        //返回
        return element;
    }
    document.body.appendChild(component())
}

打包：

webpack

运行：

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

4.4、url-loader（路径处理器）

Webpack 允许你在js文件中require图片 , 通过 url-loader和file-loader来预处理图片文件，将图片转换成base64编码。

安装

npm install --save-dev url-loader file-loader

配置webpack.config.json

//webpack配置文件

//依赖node中的path模块
const path=require('path');

//定义一个默认模块对象
module.exports= {
    //指定入口文件的位置
    entry:{                         //多人口
        index:"./src/index.js",     //入口
        app:"./src/app.js"          //入口
    },
    //设置输出结果
    output: {
        //路径，将相对路径转绝对路径
        path: path.resolve(__dirname, 'dist'),
        //多出口[name]为占位符，取entry中的key
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /.txt$/,
                use: 'raw-loader'
            },
            {
                test:/.css/,
                use:['style-loader',{
                    loader: 'css-loader',
                    options: {
                        sourceMap:true
                    }
                }]
            },{
                test: /.scss$/,
                use: [{
                    loader: "style-loader" // 将 JS 字符串生成为 style 节点
                }, {
                    loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
                }, {
                    loader: "sass-loader" // 将 Scss 编译成 CSS
                }]
            }, {
                test: /.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader'
                    }
                ]
            }
        ]
    }
}

src/bar.js

//定义模块
//部分依赖lodash中的join方法
import {join} from 'lodash';
import message from './text.txt';
// import './css.css';
import './Scss.scss';

import img from './img/1.png';

//导出一个默认模块
export default function bar() {

    function component() {
        //创建div元素
        var element = document.createElement('div');
        //使用join连接数组将结果写入元素的html中
        element.innerHTML = join(['成功', 'webpack',message], ' ');
        console.log(message)
        //返回
        return element;
    }

    function imgs(){
        var img1=document.createElement("img");
        img1.src=img;
        return img1;

    }

    document.body.appendChild(component());;
    document.body.appendChild(imgs());
}

报错：

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

安装

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

报错：

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

安装：

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

打包：

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

运行：

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

五、插件plugins

5.1、HTML Webpack Plugin（创建HTML插件）

该个插件的作用是用来自动生成html页面，既可以生成单个页面又可以生成多个页面，并且在生成前可以给它一些的配置参数，它会按照你想要的生成方式去生成页面。

安装

npm i html-webpack-plugin -D

配置webpack.config.js

//webpack配置文件

//导入用于生成html的插件
const HtmlWebpackPlugin=require("html-webpack-plugin");

//依赖node中的path模块
const path=require('path');

//定义一个默认模块对象
module.exports= {
    //指定入口文件的位置
    entry:{                         //多人口
        index:"./src/index.js",     //入口
        app:"./src/app.js"          //入口
    },
    //设置输出结果
    output: {
        //路径，将相对路径转绝对路径
        path: path.resolve(__dirname, 'dist'),
        //多出口[name]为占位符，取entry中的key
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /.txt$/,
                use: 'raw-loader'
            },
            {
                test:/.css/,
                use:['style-loader',{
                    loader: 'css-loader',
                    options: {
                        sourceMap:true
                    }
                }]
            },{
                test: /.scss$/,
                use: [{
                    loader: "style-loader" // 将 JS 字符串生成为 style 节点
                }, {
                    loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
                }, {
                    loader: "sass-loader" // 将 Scss 编译成 CSS
                }]
            }, {
                test: /.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        //创建一个插件对象，并指定参数
        new HtmlWebpackPlugin({
            //指定生成的文件路径与名称
            filename:"../Holle.html",
            //标题
            title:"Hello!"
        })
    ]
}

打包

webpack

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

运行：

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

压缩：

//webpack配置文件

//导入用于生成html的插件
const HtmlWebpackPlugin=require("html-webpack-plugin");

// const MiniCssExtractPlugin=require("mini-css-extract-plugin");

//依赖node中的path模块
const path=require('path');

//定义一个默认模块对象
module.exports= {
    //指定入口文件的位置
    entry:{                         //多人口
        index:"./src/index.js",     //入口
        app:"./src/app.js"          //入口
    },
    //设置输出结果
    output: {
        //路径，将相对路径转绝对路径
        path: path.resolve(__dirname, 'dist'),
        //多出口[name]为占位符，取entry中的key
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /.txt$/,
                use: 'raw-loader'
            },
            {
                test:/.css/,
                use:['style-loader',{
                    loader: 'css-loader',
                    options: {
                        sourceMap:true
                    }
                }]
            },{
                test: /.scss$/,
                use: [{
                    loader: "style-loader" // 将 JS 字符串生成为 style 节点
                }, {
                    loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
                }, {
                    loader: "sass-loader" // 将 Scss 编译成 CSS
                }]
            }, {
                test: /.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        //创建一个插件对象，并指定参数
        new HtmlWebpackPlugin({
            //指定生成的文件路径与名称
            filename:"../Holle.html",
            //标题
            title:"Hello!",
            minify:{
                removeComments:true,  //移除注释
                collapseWhitespace:true,  //折叠空格
                //更新请参数https://github.com/kangax/html-minifier#options-quick-reference
            }
        })
    ]
}

结果：

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Hello!</title></head><body><script type="text/javascript" src="dist/index.js"></script><script type="text/javascript" src="dist/app.js"></script></body></html>

5.2、Mini-css-extract-plugin（单独提取CSS插件）

安装

npm install --save-dev mini-css-extract-plugin

配置webpack.config.js

//webpack配置文件

//导入用于生成html的插件
const HtmlWebpackPlugin=require("html-webpack-plugin");

//导入用于提取css的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

//依赖node中的path模块
const path=require('path');

//定义一个默认模块对象
module.exports= {
    //指定入口文件的位置
    entry:{                         //多人口
        index:"./src/index.js",     //入口
        app:"./src/app.js"          //入口
    },
    //设置输出结果
    output: {
        //路径，将相对路径转绝对路径
        path: path.resolve(__dirname, 'dist'),
        //多出口[name]为占位符，取entry中的key
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /.txt$/,
                use: 'raw-loader'
            },
            {
                test:/.css/,
                use:['style-loader',{
                    loader: 'css-loader',
                    options: {
                        sourceMap:true
                    }
                }]
            },{
                test: /.scss$/,
                use: [{
                    loader:MiniCssExtractPlugin.loader //提取css并link
                }, {
                    loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
                }, {
                    loader: "sass-loader" // 将 Scss 编译成 CSS
                }]
            }, {
                test: /.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        //创建一个插件对象，并指定参数
        new HtmlWebpackPlugin({
            //指定生成的文件路径与名称
            filename:"../Holle.html",
            //标题
            title:"Hello!",
            minify:{
                removeComments:true,  //移除注释
                collapseWhitespace:true,  //折叠空格
                //更新请参数https://github.com/kangax/html-minifier#options-quick-reference
            }
        }),
        //创建一个用于提取css的插件对象
        new MiniCssExtractPlugin({
            filename:"[name]_[hash:10].css",
            chunkFilename:"[id]"
        })
    ]
}

生成的Hello.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello!</title>
  <link href="dist/index_67217d7d54.css" rel="stylesheet"></head>
  <body>
  <script type="text/javascript" src="dist/index.js"></script><script type="text/javascript" src="dist/app.js"></script></body>
</html>

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

运行

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

5.3、clean-webpack-plugin（删除或清理构建目录）

安装

npm i clean-webpack-plugin --save-dev

配置webpack.config.js里引入模块

//webpack配置文件

//导入用于删除或清理构建目录的插件
const CleanWebpackPlugin=require('clean-webpack-plugin');

//导入用于生成html的插件
const HtmlWebpackPlugin=require("html-webpack-plugin");

//导入用于提取css的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

//依赖node中的path模块
const path=require('path');

//定义一个默认模块对象
module.exports= {
    //指定入口文件的位置
    entry:{                         //多人口
        index:"./src/index.js",     //入口
        app:"./src/app.js"          //入口
    },
    //设置输出结果
    output: {
        //路径，将相对路径转绝对路径
        path: path.resolve(__dirname, 'dist'),
        //多出口[name]为占位符，取entry中的key
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /.txt$/,
                use: 'raw-loader'
            },
            {
                test:/.css/,
                use:['style-loader',{
                    loader: 'css-loader',
                    options: {
                        sourceMap:true
                    }
                }]
            },{
                test: /.scss$/,
                use: [{
                    loader:MiniCssExtractPlugin.loader //提取css并link
                }, {
                    loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
                }, {
                    loader: "sass-loader" // 将 Scss 编译成 CSS
                }]
            }, {
                test: /.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        //一定要放在前面：参数一为地址
        new CleanWebpackPlugin(['./dist'],{}),
        //创建一个插件对象，并指定参数
        new HtmlWebpackPlugin({
            //指定生成的文件路径与名称
            filename:"../Holle.html",
            //标题
            title:"Hello!",
            minify:{
                removeComments:true,  //移除注释
                collapseWhitespace:true,  //折叠空格
                //更新请参数https://github.com/kangax/html-minifier#options-quick-reference
            }
        }),
        //创建一个用于提取css的插件对象
        new MiniCssExtractPlugin({
            filename:"[name]_[hash:10].css",
            chunkFilename:"[id]"
        })
    ]
}

测试：

在dist创建无用文件，如：

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

打包：

webpack

结果：

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

六、DevServer开发服务器

webpack-dev-server就是一个基于Node.js和webpack的一个简易服务器。它在服务器端使用webpack-dev-middleware进行webpack构建打包；并在客户端注入一份runtime，用于接受服务器端的构建打包后信息。

在实际开发中我们可能会需要完成如下功能：

提供 HTTP 服务而不是使用本地文件预览；
监听文件的变化并自动刷新网页，做到实时预览；
支持 Source Map，以方便调试。

Webpack 原生支持上述第2、3点内容，再结合官方提供的开发工具 DevServer 也可以很方便地做到第1点。 DevServer 会启动一个 HTTP 服务器用于服务网页请求，同时会帮助启动 Webpack ，并接收 Webpack 发出的文件更变信号，通过 WebSocket 协议自动刷新网页做到实时预览。

6.1、快速开启DevServer

安装 DevServer：

npm i -D webpack-dev-server

安装成功后在项目的根目录下执行webpack-dev-server 命令， DevServer 服务器就启动了

webpack-dev-server

如果提示webpack-dev-server不是内部命令

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

解决办法：

在package.json里的scripts里加上"dev": "webpack-dev-server"，然后执行命令npm run dev

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

package.json

{
  "name": "Webpack_01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.11"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^1.0.0",
    "css-loader": "^2.0.0",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "jimp": "^0.6.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "raw-loader": "^1.0.0",
    "responsive-loader": "^1.1.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }
}

执行命令npm run dev

npm run dev

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

在浏览器里输入地址http://localhost:8081

结果：

JavaScript——前端工程化（webpack4.0）
一、WebPack
二、简单实例
三、深入了解webpack

四、模块转换器Loader
五、插件plugins
六、DevServer开发服务器

JavaScript——前端工程化（webpack4.0） 一、WebPack 二、简单实例 三、深入了解webpack 四、模块转换器Loader 五、插件plugins 六、DevServer开发服务器

1、资源：

2、搭建WebPack开发环境

(1)、安装NodeJS

在用 Webpack 执行构建任务时需要通过 webpack 可执行文件去启动构建任务，所以需要安装 webpack 可执行文件。 在安装 Webpack 前请确保你的系统安装了5.0.0及以上版本的 Node.js。

(2)、安装webpack

二、简单实例

2.1、创建一个项目

创建一个空项目，这里我使用WebStorm

项目结构：创建js、src目录

2.2、初始化项目

会生成package.json文件

2.3、安装webpack

webpack4需要安装webpack-cli：

2.4、创建目录与文件

src/bar.js

实现使用lodash的join 连接字符串，在网页中输出字符串

依赖lodash、npm安装lodash

生成node-modules目录

src/index.js

创建配置文件webpack.config.js

操作完成之后的目录结构：

2.5、使用webpack命令打包

打包成功！结果

index.html

webpack创建dist文件在dist中生成打包文件，然后再index.html中引用index.js文件

2.6、运行

三、深入了解webpack

3.1、入口(entry)、出口(output)

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。

创建src/app.js

webpack.config.js

打包

四、模块转换器Loader

4.1、raw-loader（文件原始内容转换器）

安装

src/text.txt

通过webpack.config.js配置、命令行或者内联使用 loader。

src/bar.js

打包：

运行：

4.2、CSS Loader（样式处理）

安装

配置webpack.config.js

src/css.css

src/bar.js

打包

运行

注意事项

4.3、sass-loader（加载和转译 SASS/SCSS 文件）

src/Scss.scss

配置webpack.config.json

src/bar.js

打包：

运行：

4.4、url-loader（路径处理器）

配置webpack.config.json

src/bar.js

报错：

安装

报错：

安装：

打包：

运行：

五、插件plugins

5.1、HTML Webpack Plugin（创建HTML插件）

配置webpack.config.js

打包

运行：

5.2、Mini-css-extract-plugin（单独提取CSS插件）

安装

配置webpack.config.js

生成的Hello.html

运行

5.3、clean-webpack-plugin（删除或清理构建目录）

安装

配置webpack.config.js里引入模块

测试：

在dist创建无用文件，如：

JavaScript——前端工程化（webpack4.0）一、WebPack 二、简单实例三、深入了解webpack 四、模块转换器Loader 五、插件plugins 六、DevServer开发服务器

在用 Webpack 执行构建任务时需要通过 webpack 可执行文件去启动构建任务，所以需要安装 webpack 可执行文件。在安装 Webpack 前请确保你的系统安装了5.0.0及以上版本的 Node.js。