vue学习【使用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 extract-text-webpack-plugin --save-dev
npm WARN [email protected] requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 7 packages from 7 contributors and audited 8805 packages in 8.9s
found 0 vulnerabilities

然后再config中改写：

 module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract ({     // 修改
                    use:'css-loader',                 // 修改   
                    fallback:'style-loader'           // 修改
                })
            }
        ]
    },
    plugins: [                                         // 新增
        // 重命名提取后的css文件
        new ExtractTextPlugin("main.css")
    ]

添加插件：

var ExtractTextPlugin = require('extract-text-webpack-plugin');// 导入插件

index中的

<script type="text/javascript" src="/dist/main.js"></script>

改写为

<link rel="stylesheet" type="text/css" href="/dist/main.css"/>

重新打包运行，npm run dev

出现以下问题：

在使用extract-text-webpack-plugin给webpack打包时出现报错
Tapable.plugin is deprecated. Use new API on `.hooks` instead
问题原因
extract-text-webpack-plugin目前版本不支持webpack4。
解决方案
使用extract-text-webpack-plugin的最新的beta版
npm install extract-text-webpack-plugin@next
--------------------- 
作者：YooHoeh 
来源：CSDN 
原文：https://blog.csdn.net/u011215669/article/details/81269386 
版权声明：本文为博主原创文章，转载请附上博文链接！

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

猜你喜欢