vue学习【使用webpack完善配置】

最新推荐文章于 2025-01-19 21:37:16 发布

小卜妞~

最新推荐文章于 2025-01-19 21:37:16 发布

阅读量896

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_33866063/article/details/89217253

在前一阶段成功启动Vue项目后，本文将进一步完善Webpack配置，介绍如何安装和配置Loader来处理不同类型的文件，特别是CSS。通过引入style.css并修改Webpack配置，将CSS从JS动态插入改为独立的样式文件。利用`extract-text-webpack-plugin`插件，解决了CSS动态加载导致的项目体积过大问题。在修改Webpack配置并重新打包后，项目运行过程中遇到的问题也进行了说明。

上一篇文章已经可以启动网页了！Now,we need to install some Loaders for some kinds of files.

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

安装完成后，在config中配置Loader

 module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }

在目录下建立style.css

#app{
    font-size: 24px;
    color: #f50;
}

在main.js中引入：import './style.css'

然后：npm run dev 运行发现css样式已经生效了。

然后检查该页面：会发现CSS是通过js动态创建<style>标签来实现的，这样会导致项目很庞大，所以使用一个插件来解决【extract-text-webpack-plugin】

D:\newIdea\webpack>npm install extrac

最低0.47元/天解锁文章

新学期VIP享超值加赠