Vue--webpack打包css、image资源

前戏

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要结合插件来使用，这些插件在Webpack 中被称为 Loader （加载器）来进行转换。

Loader 可以理解为是模块和资源的转换器，它本身是一个函数，参数接受的是源文件，返回值是转换后的结果。

这样，我们就可以通过 require 或 import 来加载任何类型的模块或文件，比如 CSS、图片。

打包css资源

要打包css资源，要安装 style-loader 和 css-loader 依赖

css-loader 是将 css 装载到 javascript；

style-loader 是让 javascript 认识 css

npm install --save-dev style-loader css-loader

修改webpack.config.js文件，增加model参数

// 引入node中的path模块，处理文件路径 的小工具
const path = require('path')

// 导出一个webpack具有特殊属性配置的对象
module.exports = {
    mode: 'none', // 指定模式配置："development" | "production" | "none"
    // 入口
    entry: './src/main.js', // 入口模块文件路径 
    // 出口
    output: {
        // path: './dist/', 错误的，要指定绝对路径
        path: path.join(__dirname, './dist/'), //打包的结果文件生成的目录要是绝对路径
        filename: 'bundle.js' 
    },
    module: { // 模块
            rules: [ // 规则
             {
                test: /\.css$/, // 正则表达式，匹配 .css 文件资源,不要加引号
                use: [  // 使用的 Loader ,注意顺序不能错
                  'style-loader',
                  'css-loader'
               ]
             }
           ]
         }
}

在src文件夹创建 css 文件夹, css文件夹下创建 style.css

Vue--webpack打包css、image资源

style.css

body {
    background: red;}

在 main.js 只引入 style.css

// 模块方式导入 css , 最终会打包成js，打包在 bundle.js 中
import './css/style.css'

重新打包编译

npm run build

打包后，查看 bundle.js ，发现已经将 css 样式以 js 方式引入了

访问 index.html , 看看背景是不是变成红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="./dist/bundle.js"></script>
</body>
</html>

index.html