JavaScript——前端工程化（webpack4.0）

一、WebPack

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

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

webpack -v

二、简单实例

2.1、创建一个项目

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

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

2.2、初始化项目

npm init -y

会生成package.json文件

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目录

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"
    }

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

2.5、使用webpack命令打包

可以指定配置文件

webpack --config webpack.config.js

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

webpack

打包成功！结果

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>

项目结构：

2.6、运行

三、深入了解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

结果：

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

运行：

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

运行

注意事项

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

运行：

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());
}

报错：

安装

报错：

安装：

打包：

运行：

五、插件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

运行：

压缩：

//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
            }
        })
    ]
}

结果：

<!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>

运行

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创建无用文件，如：

打包：

webpack

结果：

六、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不是内部命令

解决办法：

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

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

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

结果：

相关阅读:
一、JQuery选择器
 二、HelloMaven-第一个Maven项目
 一、maven的简介和环境搭建
 Junit源码
 五、spring和Hibernate整合
 JS 冒泡排序从学到优化
 JS小案例(基础好烦恼少)----持续更新
 JS+PHP实现用户输入数字后取得最大的值并显示为第几个
 将博客搬至CSDN
HTML表单相关
原文地址：https://www.cnblogs.com/huoqin/p/10114668.html

JavaScript——前端工程化（webpack4.0）

一、WebPack

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里引入模块

测试：

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