webpack3-CSS⽂件打包
1、css 打包简单配置
  css 打包要依赖 style-loader 和 css-loader 来解析。⾸先安装这两个loader
npm install style-loader css-loader --save-dev
编写css⽂件 “./src/css/index.css”
body{
background-color: red;
color: white;
}
在⼊⼝⽂件 “./src/entery.js” 中引⼊css⽂件
import css from './css/index.css'
style-loader
style-loader ：syle-loader 是⽤来处理 css ⽂件中的 url() 等
css-loader ：css-loader 是⽤来将 css 插⼊到页⾯的 style 标签。
css-loader
配置：
module:{
rules: [
test: /\.css$/,
use: ['style-loader', 'css-loader']
]
}
2、单独打包css
  上述⽅法是将 css 以 style 标签的形式 插⼊到 head 标签下，如果想将 css 单独提取出来，需要使⽤ extract-text-webpack-plugin 插件。
webpack打包流程 面试
  虽然 extract-text-webpack-plugin 可以完成 css 代码提取，但是 webpack 官⽅不建议这样做，因为他们认为 css 就应该打包在JavaScript 中以减少 HTTP 的请求数。
安装
npm install --save-dev extract-text-webpack-plugin
引⼊
const extractTextPlugin = require("extract-text-webpack-plugin");
配置
plugins: [
new extractTextPlugin("/css/index.css");  // /css/index.css是分离后的路径位置
]
module:{
rules: [
test: /\.css$/,
use: act({
fallback: "style-loader",
use: "css-loader"
})
]
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。