网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于css文件实现分离的插件(extract-text-webpack-plugin)的用法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
css分离:extract-text-webpack-plugin
1、安装该插件:
for webpack 1
npm install –save-dev extract-text-webpack-plugin@1.0.1
for webpack 2
npm install –save-dev extract-text-webpack-plugin@2.1.2
for webpack 3
npm install –save-dev extract-text-webpack-plugin
for webpack 4
npm i extract-text-webpack-plugin@next -D
2、在webpack-config.js中引入插件
const extractTextPlugin=require(“extract-text-webpack-plugin”);
3、配置plugins:这里new一下这个对象,与上面那个配置插件用逗号分隔
new extractTextPlugin(“/css/index,.css”)
4、这里的/css/index.css是分离后的路径位置。这部配置完成后,包装代码:还要修改原来我们的style-loader和css-loader
[x] 修改代码如下:
module:{ rules: [
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},{ test:/\.(png 关键词:css文件完成分离的插件(extract-text-webpack-plugin)的用法