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

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

F12查看 index.html 源码后，其实是将 CSS 文件内容转成一个 JavaScript 模块，然后在运行 JavaScript 时，会将样式动态使用 <sytle> 标签作用在页面 <head> 标签下

打包image资源

安装 file-loader 依赖

npm install --save-dev file-loader

修改 webpack.config.js

// 引入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'
               ]
             },
             {
                test: /\.(png|svg|jpg|gif)$/,  // 匹配图片资源
                use: 
                   [
                      'file-loader'
                  ]
             }
           ]
         }
}

把1.jpg放在css文件夹下

修改 style.css

body{
    background: red;
    background-image: url(./1.jpg)
    }

打包编译

npm run build

访问根目录下的 index.html , 背景图并未显示出来

问题：

如果直接访问根目录下的 index.html ，那么图片资源路径就无法访问到。
解决方案：就是把 index.html 放到 dist 目录中。
但是 dist 是打包编译的结果，而非源码，所以把 index.html 放到 dist 就不合适。
而且如果我们一旦把打包的结果文件名 bundle.js 改了之后，则 index.html 也要手动修改。
综合以上遇到的问题，可以使用一个插件： html-webpack-plugin 来解决。

使用 HtmlWebpackPlugin 插件

现在的目录结构

作用：解决文件路径问题

将 index.html 打包到 bundle.js 所在目录中

同时也会在 index.html 中自动的 <script> 引入 bundle.js

安装插件

npm install --save-dev html-webpack-plugin

修改 webpack.config.js

// 引入node中的path模块，处理文件路径 的小工具
const path = require('path')
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 导出一个webpack具有特殊属性配置的对象
module.exports = {
    mode: 'none', // 指定模式配置："development" | "production" | "none"
    // 入口
    entry: './src/main.js', // 入口模块文件路径 
    // 出口
    output: {
        // path: './dist/', 错误的，要指定绝对路径
        path: path.join(__dirname, './dist/'), //打包的结果文件生成的目录要是绝对路径
        filename: 'bundle.js'
    },

    // 配置插件
    plugins: [
        new HtmlWebpackPlugin({
            // 指定要打包的模板页面
            // 就会将 index.html 打包到与 bundle.js 所在同一目录下面，
            // 同时在 index.html 中会自动的使用script 标签引入bundle.js
            template: './index.html'
        })
    ],
    
    module: {
        rules: [ //配置转换规则
            {
                test: /\.css$/, // 注意，不要有单引号，正则表达 式，匹配 .css 文件资源 
                use: [
                    // 根据外国人的习惯来的顺序，而且顺序不要写错
                    'style-loader', // js识别css
                    'css-loader' // css 转换为 js
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }


}

修改 index.html, 模拟下vue页面

<!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>
    <!-- 配置了HtmlWebpackPlugin 插件之后 ，不需要手动的引入bundle.js,
    因为它会自动的将它引入 -->
    <!-- <script src="./dist/bundle.js"></script> -->
    <div id="app"></div>
</body>
</html>

重新打包

npm run build

运行后，你会发现 dist 目录下多有一个 index.html , 并且文件中自动引入了 bundle.js

<!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>
    <!-- 配置了HtmlWebpackPlugin 插件之后 ，不需要手动的引入bundle.js,
    因为它会自动的将它引入 -->
    <!-- <script src="./dist/bundle.js"></script> -->
    <div id="app"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

运行 dist/index.html 文件，背景图正常显示了。不要运行了根目录下的 index.html