webpack4学习之路2 管理资源（loader）

最新推荐文章于 2022-06-04 21:57:13 发布

冥界摄政王

最新推荐文章于 2022-06-04 21:57:13 发布

阅读量791

点赞数 1

分类专栏： webpack 文章标签： webpack4

本文链接：https://blog.csdn.net/jinyuyang78/article/details/79472186

版权

webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

webpack4学习之路2 管理资源（loader）

在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。同样方式也被用于 JavaScript 模块，但是，像 webpack 这样的工具，将动态打包(dynamically bundle)所有依赖项（创建所谓的依赖图(dependency graph)）。这是极好的创举，因为现在每个模块都可以_明确表述它自身的依赖，我们将避免打包未使用的模块。

webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。也就是说，以上列出的那些 JavaScript 的优点（例如显式依赖），同样可以用来构建网站或 web 应用程序中的所有非 JavaScript 内容。让我们从 CSS 开始起步，或许你可能已经熟悉了这个设置过程。

1.为了从 JavaScript 模块中 import 一个 CSS 文件，你需要在 module 配置中安装并添加 style-loader 和 css-loader：

如下 cnpm install style-loaer css-loader --save-dev 下载并保存到package.json中；现在你的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": {
    "css-loader": "^0.28.10",/新增加
    "style-loader": "^0.20.2",///新增加
    "watchpack": "^1.5.0",
    "webpack": "^4.1.0",
    "webpack-cli": "^2.0.10"
  }
}

2 在webpack-dome文件夹的根目录下新建 webpack.config.js文件；注意文件名必须是 webpack.config.js；我一开始就写成了 webpack-config.js 结果如何都不加载配置文件后来才发现名字错了。文件内容如下：

/**
 * webpack.config.js
 * Created by Administrator on 2018/3/7.
 */
const path = require('path');//nodejs的路径方法
module.exports={
    entry: './src/index.js',  //入口文件
    output: {
        filename: 'main.js', //出口文件名
        path: path.resolve(__dirname, 'dist') //出口文件夹
    },
    module:{
        rules:[
            {
                test:/\.css$/, //正则匹配所有.css文件 用下面的loader解析
                use:[
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
};

3.在src文件夹下新建style.css文件内容如下：

h1{
    color: red;
    font-size: 50px;
}

4.在index.js文件修改内容如下：

import './style.css';
document.write("<h1>我在学习webpack4</h1>");

5 运行 npm run dev

倒数第二条提示 style.css 打包完成；

6 运行index.html;

可以看到 h1的字体颜色都发生了改变。

假想，现在我们正在下载 CSS，但是我们的背景和图标这些图片，要如何处理呢？使用 file-loader，我们可以轻松地将这些内容混合到 CSS 中：

cnpm install --save-dev file-loader

不出意外的话你现在的package.josn文件又多了条记录：

{
  "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": {
    "css-loader": "^0.28.10",
    "file-loader": "^1.1.11",//新增加
    "style-loader": "^0.20.2",
    "watchpack": "^1.5.0",
    "webpack": "^4.1.0",
    "webpack-cli": "^2.0.10"
  }
}

1.修改webpack.config.js文件

 * webpack-config.js
 * Created by Administrator on 2018/3/7.
 */
const path = require('path');
module.exports={
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,//正则匹配所有的图片 用feil-loader 解析
                use: [
                    'file-loader'
                ]
            }
        ]
    }
};

2.复制一张图片过来

3.修改style.css 样式 h1添加一张背景图片

h1{
    color: red;
    font-size: 60px;
    background: url("hydlbg.jpg") no-repeat center;
}

4 npm run dev

可以看到图片已经被重新命名了嘻哈值图片的名字。

5 刷新index.html

可以看到背景图片已经出来了。

要是想在html 直接插入图片该怎么办呢

1.修改 index.js文件

//import './style.css';
//document.write("<h1>我在学习webpack4</h1>");
import img from './hydlbg.jpg';
var div=document.getElementById('imgbox');
var myimg=new Image();
myimg.src=img;
div.appendChild(myimg);

2.修改index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack4</title>
</head>
<body>
<div id="imgbox"></div>   ///增加
<script type="text/javascript" src="main.js"></script>
</body>
</html>

3。 npm run dev

4.刷新index.html

这种方法比较麻烦

冥界摄政王

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack4学习之路2 管理资源（loader）

webpack4学习之路2 管理资源（loader）在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。同样方式也被用于 JavaScript 模块，但是，像 webpack 这样的工具，将动态打包(dynamically bundle)所有依赖项（创建所谓的依赖图(dependen...
复制链接

扫一扫