上一篇文章已经可以启动网页了!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
版权声明:本文为博主原创文章,转载请附上博文链接!