【Vue】07 Webpack Part3 Loader

Loader是Webpack的核心概念：

除了JS文件以外我们还有CSS，图片，包括一些ES6规范的代码

或者是TypeScript各种前端类型的文件

但是最终必须统一转换成JS文件，Webpack本身无法转换这些文件

所以需要Loader来实现

在之前的项目中的SRC目录创建一个CSS目录并且编写style.css

css代码：

p {
    font-size : 30px;
    color : red;
}

main.js的引入：

require("./css/style.css");

打开终端进行打包处理：

扫描二维码关注公众号，回复： 11439344 查看本文章

提示需要loader处理这样的文件类型

所以需要css-loader，在本项目安装css-loader

cnpm install css-loader --save-dev

这里发现警告，css-loader要求webpack版本至少4.0.0或者是5.0.0版本，但是安装的是3.6.0版本

然后还需要在webpack.config.js中配置module节点

const path = require('path');

module.exports = {
    entry : "./src/main.js", // 入口 可以是字符串，数组，对象
    output : { // 出口，通常是一个对象 至少包含路径和文件名
        path : path.resolve(__dirname, 'dist'),
        filename : "bundle.js"
    },
    module : {
        rules : [
            { test : /\.css$/, use : ['css-loader'] }
        ]
    }
}

然后执行打包：

首页导入打包好的js文件查看渲染效果：

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

</body>
</html>

但是样式没有生效：

所以我们要style-loader去解析才能给浏览器渲染出来

cnpm install style-loader --save-dev

然后一样去配置：

const path = require('path');

module.exports = {
    entry : "./src/main.js", // 入口 可以是字符串，数组，对象
    output : { // 出口，通常是一个对象 至少包含路径和文件名
        path : path.resolve(__dirname, 'dist'),
        filename : "bundle.js"
    },
    module : {
        rules : [
            { test : /\.css$/, use : ['style-loader', 'css-loader'] }
        ]
    }
}

再次打包查看：

【标题标签不渲染的啊。。。拿段落渲染可以】

【Vue】07 Webpack Part3 Loader

猜你喜欢