webpack打包原理入门探究（七）其他文件处理

公众号---人生代码

发布于 2020-06-11 10:39:20

4930

发布于 2020-06-11 10:39:20

文章被收录于专栏：人生代码人生代码

接下来我么来处理图片文件

我们先在 src/assets/img/ken.png

在 src/components/layer/layer.scss 引入图片

.layer {
    height: 100px;
    width: 100px;
    background: url('../../assets/img/ken.png');
    color: #ffffff;
    display: flex;
    
}

现在直接运行 npm run webpack.app

这时我们需要安装一些处理图片的 loader

npm install file-loader image-loader url-loader --save-dev

再运行一遍 npm run webppack.app

我们发现已经将图片引入进来了

这个 file-loader 是处理 css样式中的图片地址，index.html的图片地址相对路径没有问题，但是如果处理组件中的图片的相对路径是会有一些问题，需要借助 require()

<img :src="require('../src/bg.png')" />

我们再来处理一下打包之后存放的位置，需要配置一下 webpack.app.config.js

let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {
    return path.resolve(__dirname, o)
}
module.exports = {
    entry: resolve('src/app.js'), // 指定入口文件
    output: {
        path: resolve('dist'),
        // filename: '[name]-[hash].js'
        filename: "js/[name].bundle.js",
        // publicPath: ''
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: resolve('node_modules'), //指定排除的范围,
                include: resolve('src')
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader!postcss-loader'
            },
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!postcss-loader!sass-loader'
            },
            {
                test: /\.less$/,
                loader: 'style-loader!css-loader!postcss-loader!less-loader'
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                query: {
                    name: "assets/img/[name].[hash].[ext]"
                }
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            // filename: "index-[hash].html",
            // filename: 'index-[chunkhash].html',
            filename: "index.html", // 生成 dist/a.html
            template: 'index.html', // 指定根目录下的 index.html
            inject: 'body',
        })
    ]
}