webpack配置项目加载静态资源

朴灿烈づ我的快乐病毒、 2022-05-31 02:30 931阅读 0赞

在上篇文章中，我分享了vue-loader与webpack项目配置，链接  
[http://blog.csdn.net/zzy123654321/article/details/79250644][http_blog.csdn.net_zzy123654321_article_details_79250644]  
这篇文章中，我将分享如何加载页面所需的各类静态资源  
**1.配置loader**  
打开webpack.config.js文件，在module下添加rules

//css相关配置
                {
                    test: /\.css$/,//css文件格式
                    use: [
                        'style-loader',
                        'css-loader'
                    ]
                }
     //css预处理器stylus相关配置
                {
                    test: /\.styl$/,//styl文件格式
                    use: [
                        'style-loader',
                        'css-loader',
                        'stylus-loader'
                    ]
                },
     //图片相关配置
                {
                    test: /\.(gif|jpg|jpeg|png|svg)$/,//图片各类格式
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                limit: 1024,//图片大小
                                name: '[name]-aaa.[ext]'//图片名称规则
                            }
                        }
                    ]
                }

注：上述代码中的loader需要安装  
例：安装style-loader(类似上一篇文章中第二步操作)  
终端中输入

npm i style-loader

**2. 创建相应静态资源**  
在src文件夹中新建一个名为asset的文件夹，可将相关静态资源文件放入此文件夹  
作者在此文件夹下创建了两个子文件夹，将图片文件放入名为images的子文件夹中，css、styl文件放入名为style的子文件夹中

**3.通过import语句导入模块**  
在src文件夹下的index.js文件下添加相应代码

//导入css文件
    import './assets/styles/test.css'
    //导入styl文件
    import './assets/styles/test-stylus.styl'
    //导入图片
    import './assets/images/timg.jpg'

完成以上步骤后，在终端输入

npm run build

运行无误后，相应的静态资源就被成功打包进bundle.js文件当中  
ps：作者作为初学者，在学习过程中通过发表博客的方法记录、分享自己的学习过程和心得，因此其中出现的错误，还望各位大佬指正，不胜感激。

[http_blog.csdn.net_zzy123654321_article_details_79250644]: http://blog.csdn.net/zzy123654321/article/details/79250644