zoukankan      html  css  js  c++  java
  • webpack分离css单独打包

    原文地址,欢迎Star!github

    webpack分离css单独打包

    完整的文章【使用markdown编写,新增单独打包成多个CSS文件】

    瞎扯

    webpack 把所有的资源都当成了一个模块, CSS,Image, JS 字体文件 都是资源, 都可以打包到一个 bundle.js 文件中.
    但是有时候需要把样式 单独的打包成一个文件, 然后放到 CND上, 然后缓存到浏览器客户端中


    这个操作很简单的,只需要一个插件就好了,就是extract-text-webpack-plugin

    1. 安装extract-text-webpack-plugin

    npm install extract-text-webpack-plugin --save-dev

    2. 配置文件添加对应配置

    首先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" },
    ]
    },

    3. 在引入文件里面添加需要的css,【举例如下】

    require('../less/app.less'); 
    require('./bower_components/bootstrap-select/dist/css/bootstrap-select.min.css');
    require('./bower_components/fancybox/source/jquery.fancybox.css');



    您可能还感兴趣

    1. 【简书】【WEBPACK】分离css单独打包

    2. 【博客园完整版】webpack分离css单独打包

    3. 【GITHUB】前端技术文章汇总

  • 相关阅读:
    SetupFactory7使用经验
    中值滤波C语言优化
    回归直线方程
    图像倾斜矫正方程基本的图像变换
    关于相机的一些概念
    VS如何自动创建函数头 函数说明
    自动打开虚拟机
    一些笔记jexcel
    linux 重启mysql redis等服务器
    handsontable 随记
  • 原文地址:https://www.cnblogs.com/zhongxia/p/5500990.html
Copyright © 2011-2022 走看看