源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

详解webpack分离css单独打包

  • 时间:2022-05-15 08:48 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:详解webpack分离css单独打包
这篇文章只写了如何把CSS打包成一个CSS文件,没有讲解如何打包成多个CSS文件,经简友提点,这里添加上了 打包成多个CSS文件的方法。 [b]瞎扯[/b] webpack 把所有的资源都当成了一个模块, CSS,Image, JS 字体文件 都是资源, 都可以打包到一个 bundle.js 文件中. 但是有时候需要把样式 单独的打包成一个文件, 然后放到 CND上, 然后缓存到浏览器客户端中 [b]一、extract-text-webpack-plugin 使用方法[/b] 这个操作很简单的,只需要一个插件就好了,就是[code]extract-text-webpack-plugin[/code] [b]1. 安装extract-text-webpack-plugin[/b]
npm install extract-text-webpack-plugin --save-dev
[b]2. 配置文件添加对应配置[/b] 首先require一下
var ExtractTextPlugin = require("extract-text-webpack-plugin");
plugins里面添加
new ExtractTextPlugin("styles.css"),
实例:
plugins: [
  new webpack.optimize.CommonsChunkPlugin('common.js'),
  new ExtractTextPlugin("styles.css"), 
],
modules里面对css的处理修改为
{
 test: /\.css$/,
  loader: ExtractTextPlugin.extract("style-loader","css-loader")
},
千万不要重复了,不然会不起作用的 我这里如下:
module: {
  loaders: [
   {
   test: /\.css$/,
    loader: ExtractTextPlugin.extract("style-loader","css-loader")
  },
   {
   test: /\.scss$/,
    loader: "style!css!sass"
  },
   {
   test: /\.less$/,
    loader: "style!css!less"
  },
 ]
},
[b]3. 在引入文件里面添加需要的css,【举例如下】[/b]
require('../less/app.less');
require('./bower_components/bootstrap-select/dist/css/bootstrap-select.min.css');
require('./bower_components/fancybox/source/jquery.fancybox.css');
[b]二、如何把CSS打包成一个文件, 和 把CSS打包成多个文件[/b] 打包一个文件,只需要常规的在入口的js文件引用 css文件即可, 打包成多个CSS文件,可以设置多个CSS入口,让webpack用 loader去打包。 和分割单独打包js文件一样。下面有两个例子。
// 使用webpack 打包单独的postcss语法的css文件
/* webpack.config.js */
var precss = require('precss');
var cssnext = require('cssnext');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var Ex = require('extract-text-webpack-plugin');
module.exports = {
 entry: './【path】/index.js',
 /* index.js 里 require('./【name】.css');就好 我在看看文档是不是直接不用引入js文件 */
 output: {
  filename: 'index.js'
 },
 module: {
  loaders: [{
  test: /\.css$/,
  loader: Ex.extract('style-loader', 'css-loader!postcss-loader') /*这里的写法注意下 */
  }]
 },
 postcss: function() {
  return [autoprefixer, cssnext, precss, cssnano]
 },
 plugins: [
  new Ex("【name】.css")
 ]
 }

 // 使用webpack 打包单独的多个postcss语法的css文件
var precss = require('precss');
var cssnext = require('cssnext');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var Ex = require('extract-text-webpack-plugin');
var webpack = require('webpack');


module.exports = {
 entry: {
 ac1: './src/actother.css',
 ac2: './src/index.css'
 },
 output: {
 filename: "[name].css"
 },
 module: {
 loaders: [{
  test: /\.css$/,
  loader: Ex.extract('style-loader', 'css-loader!postcss-loader')
 }]
 },
 postcss: function() {
 return [autoprefixer, precss, cssnano, cssnext]
 },
 plugins: [
 new Ex('[name].css')
 ]
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部