webpack 分离css中的图片 - CSDN
精华内容
参与话题
  • webpack4 分离css

    千次阅读 2018-07-24 17:50:35
    今天我想记录一下webpack4 如何分离csswebpack4之前一直使用是extract-text-webpack-plugin 来分离css和js。在webpack4之后就无法再分离,很多人配置这个,不报错,但也达不到分离css。 官网上面有一句话: :...

    前言:webpack从1.0的版本 飞速的发展到了webpack5。今天我想记录一下webpack4 如何分离css。webpack4之前一直使用是extract-text-webpack-plugin 来分离css和js。在webpack4之后就无法再分离,很多人配置这个,不报错,但也达不到分离css。

    官网上面有一句话:

    :warning: Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

    由此看来webpack4已经废弃 extract-text-webpack-plugin 这个插件了,现在使用的是 mini-css-extract-plugin

    使用方法

    npm install mini-css-extract-plugin --save

    注意: 代码中无需再使用style-loader。如果使用将会报错:window is not define,这里我要补充一下,在 开发环境我们还是使用 style-loader, 在生产环境使用miniCssExtractPlugin.loader。具体请看插件管网,里面有详细配置说明https://github.com/webpack-contrib/mini-css-extract-plugin

    {
        test:/\.css/,
        use:[miniCssExtractPlugin.loader,"css-loader",{
            loader: "postcss-loader",
            options: {
                plugins: () => [require('autoprefixer')]
            }
        }]
    },
    {
      test:/\.less$/,
      use:[miniCssExtractPlugin.loader,"css-loader",{
          loader: "postcss-loader",
          options: {
              plugins: () => [require('autoprefixer')]
          }
      },"less-loader"]
    },
    展开全文
  • webpack如何正确分离css

    千次阅读 2017-06-09 10:34:33
    webpack2的写法 需要用到的插件 const ExtractTextPlugin = require('extract-text-webpack-plugin'); { test:/\.css$/, exclude:node_modules, use:ExtractTextPlugin.extract({fallback:"style-loader",use:[...

    webpack2的写法

    需要用到的插件

    const ExtractTextPlugin = require('extract-text-webpack-plugin');


    {
    test:/\.css$/,
    exclude:node_modules,

    use:ExtractTextPlugin.extract({fallback:"style-loader",use:["css-loader"]}),

    //use:ExtractTextPlugin.extract({fallback:"style-loader",use:["css-loader","postcss-loader"]})

    },


    plugins:[
    new ExtractTextPlugin("[name].css"),

    ]
    注:webpack1的写法ExtractTextPlugin.extract("style-loader","css-loader"); webpack2不支持
    展开全文
  • 一、CSS分离我们知道webpack的理念就是把所有的东西都打包到js文件,包括css、图片呀等等,好处是减少http请求,但劣势也很明显,就是随着项目越来越大,js文件也会越来越大,所以,我们就需要对css文件进行分离...

    一、CSS分离

    我们知道webpack的理念就是把所有的东西都打包到js文件中,包括css、图片呀等等,好处是减少http请求,但劣势也很明显,就是随着项目越来越大,js文件也会越来越大,所以,我们就需要对css文件进行分离

    css分离,嗯,其实就是将css单独打包,做法很简单,需要一个插件,extract-text-webpack-plugin@next(注意:加@next是现阶段必须要加的(前提是你使用的webpack是4.0版本及以上的,如果你使用的是3版本及以前的版本的话不需要加@next),但以后如果过渡到了这个版本,就不需要加了),目前如果不加,插件版本太低,会报错

    1. npm i extract-text-webpack-plugin@next -D
    2. 在配置文件中引入  const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
    3. 在plugins中加入new  ExtractTextWebpackPlugin('css提取出去的路径') 
    4. 在配置文件中修改针对css的设置如下所示
    {
                    test:/\.css$/,
                    use:ExtractTextWebpackPlugin.extract({
                        fallback:'style-loader',
                        use:['css-loader']
                    })
                }

    注意:有的设置可能会出现图片背景路径问题,此时可以加入publicPath来修改css背景路径问题(视具体情况而定)

    二、消除冗余的css代码

    平时我们去写一些项目的时候,会引入一些框架比如bootstrap,引入这个框架后,文件会变得很大,,而我们能用到的却很少,那很多代码就浪费掉了,所以这时候我们就可以想办法优化这些代码,说白了,就是把没有用到的css代码给去除掉

    我们知道webpack有很多优点,那,其中一个是可以优化代码,提高性能。消除冗余的css代码也是webpack优化性能的一种方法

    步骤:

    1. npm i purifycss-webpack   purify-css  -D
    2. 引入插件:const PurifyCssWebpack  = require('purifycss-webpack');
    3. 还需要引入一个额外包glob(用于扫描路径) npm i glob -D
    4. const glob = require('glob');
    5. 在plugins中配置:
    new PurifyCssWebpack({
                paths:glob.sync(path.join(__dirname,'src/*.html'))
            })

    三、自动添加浏览器内核前缀

    这里需要用到post-css(预处理器)还需要一个插件 autoprefixer(是处理前缀的插件,是post-css众多插件中的一种)

    步骤:

    1、npm i postcss-loader  autoprefixer -D

    2、在根目录中添加一个配置文件postcss.config.js,然后配置postcss

    module.exports = {
        plugins:[require('autoprefixer')]
    }

    3、在webpack.config.js中处理css的配置文件中添加postcss-loader,如下所示

    {
      test:/\.css$/,
      use:['style-loader','css-loader','postcss-loader']
    }

    注意:写法很多,上面只是参考哦

    如果想要分离css,可以写成

     {
                    test:/\.css$/,
                    use:ExtractTextWebpackPlugin.extract({
                        fallback:'style-loader',
                        use:['css-loader','postcss-loader']
                    })
                }
    展开全文
  • webpack4采坑二:分开打包js和css文件

    千次阅读 2018-12-17 17:46:10
    网上有很多关于如何分开打包js和css文件,发现存在有很多问题(比如:webpack3配置和webpack4配置有些不同、文章内容不全面等),采坑过程走了很多歪路 以下直接贴出代码 1、package.json配置 采坑点:webpack4...

    网上有很多关于如何分开打包js和css文件,发现存在有很多问题(比如:webpack3配置和webpack4配置有些不同、文章内容不全面等),采坑过程中走了很多歪路

    以下直接贴出代码

    1、package.json配置

    采坑点:webpack4需要mini-css-extract-plugin来分开打包css文件,不能用extract-text-webpack-plugin 不支持了webpack4

     

    {
      "name": "webpack_test",
      "version": "1.0.0",
      "main": "a.js",
      "scripts": {
        "build": "webpack --progress --watch",
        "server": "webpack-dev-server --content-base ./"
      },
      "author": "",
      "license": "ISC",
      "keywords": [],
      "description": "",
      "dependencies": {
        "lodash": "^4.17.11",
        "moment": "^2.22.2"
      },
      "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-preset-env": "^1.7.0",
        "babel-preset-es2015": "^6.24.1",
        "css-loader": "^2.0.1",
        "mini-css-extract-plugin": "^0.5.0", //支持webpack4
        "style-loader": "^0.23.1",
        "webpack": "^4.27.1",
        "webpack-cli": "^3.1.2",
        "webpack-dev-server": "^3.1.10"
      }
    }

    3、webpack.config.js配置

    采坑点:“style-loader”“css-loader”“MiniCssExtractPlugin.loader”顺序问题,先css-loader编译css文件,再用MiniCssExtractPlugin分开打包css文件,最后用style-loader将css加载到页面上。

    const path = require('path');
    const webpack = require('webpack');
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    
    module.exports = {
        devtool: 'source-map',
        entry: {
           'a': [path.resolve(__dirname, 'assets/source/js/a.js')]
        },
        output: {
            path: path.resolve(__dirname, 'assets/dist/js'),
            filename: '[name]-buddle.js'
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [
                        "style-loader",
                        MiniCssExtractPlugin.loader,
                        "css-loader"
                    ]
                },
                {
                    test: /\.js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: { presets: ['es2015'] }
                        }
                    ]
                }
            ]
        },
    
        plugins:[
            new MiniCssExtractPlugin({
                  filename: "../css/[name]-buddle.css"
                })
          ]
    }

    3、cnpm run build -----执行webpack打包

    4、cnpm run server -----启动服务

     

     

    展开全文
  • Vue项目升级到Webpack 4.x初步踩坑总结

    万次阅读 2018-06-27 16:07:38
    Vue项目升级到Webpack 4.x初步踩坑总结,包括压缩JS/CSS,分离CSS/提取CSS到单独文件,分离Chunk,以及vue-loader 15.x版本的使用和基于vue项目的修改
  • webpack5,分离css单独文件,出错

    千次阅读 2018-05-28 15:36:34
    今天打算使用他做个小页面,发现以前看到的例子都是js和css打包到同一个文件里面,他有他的好处(我并不理解),但我喜欢csscss文件,js是js文件,你进来看,肯定也是希望css单独出来,可以的话留下你的想法,交流...
  • webpack4---生产环境css样式丢失问题

    千次阅读 2019-09-24 11:35:44
    相信有很多人跟我一样看webpack4官方文档进行学习配置,但是在配置的过程遇到一个非常奇怪的问题——“明明开发环境显示的好好地样式,在生产环境就不生效了”。 项目目录 //webpack.prod.js plugins:[ ...
  • 学习webpack4.X(二,处理CSS

    千次阅读 2018-06-13 14:44:30
    Less文件的打包和分离 安装less的服务和less-loader npm install --save-dev less ess-loader webpack.config.js配置loader { test: /\.less$/, use: [{ loader: "style-loader" }, { l...
  • 使用第三库:  1. 直接npm下载,然后引入(完全可以使用,但是我个人不是很推荐) cnpm i jquery -S import $ from 'jquery' $(xxxx).on() $(xxx).css() ...const webpack = require('webpack');
  • 图片处理 1.css背景图片的处理 我们设置一张图片背景 //a.css body { background: url(../images/timg.jpg) repeat-y; } #root { color: yellow; } 运行npm run dev,我们发现又报错,提示我们缺少一个...
  • 在过去,如何将 CSS 提取到一个文件这是 extract-text-webpack-plugin 的工作。不幸的是这个插件与 webpack 4 不太兼容。根据 Michael Ciniawsky 的说法:extract-text-webpack-plugin 的维护已经成为了一个很大的...
  • webpack打包环境优化的一个点:将css样式代码抽离出来。 若不抽离,可以在bundle.js发现css代码被转化成节点样式插入到了body下;这个过程是:style-loader将外部css文件注入到htmlcss内容使用css-loader进行...
  • loader新建css文件夹,新建common.css文件webpack把任何资源都视为模块,在入口文件app.js引入需要的模块(可以require方式引用,此处我们统一用es6的import方式引用)在webpack.config.js,配置css的loader,...
  • 1.文件css会打包成了js形式 如何优化 1.将css打包成一个单独的文件 (1)安装插件extract-text-webpack-plugin cnpm install --save extract-text-webpack-plugin (2)在webpack.config.js 引入一个常量 ...
  • webpack+vue2.0+手动添加sass的编译模板

    千次阅读 2017-09-04 16:59:48
    webpack+vue2.0+手动添加sass的编译模板
  • webpack + react 优化:缩小js包体积

    万次阅读 多人点赞 2016-09-16 21:38:28
    一,前言学校这边的项目刚组建好开发团队,前一段时间都在考虑如何前后端分离,如何多人协作开发的问题,恰好上一周陪女朋友去承德写生,能暂时放下工作和学校的事物,有了更多的思考时间。假期期间学习了webpack,...
  • webpack4.x关于css-loader的几个坑

    千次阅读 2018-11-21 17:28:18
    本文主要记录笔者在webpack4.x项目下使用css-loader管理css踩到的坑(下面用一个逐步修改的示例来说明)。 项目的初始诉求是使用webpack来托管css的合并。 当前项目代码结构如下图: package.json代码: { &...
  • webpack4——less文件打包分离

    千次阅读 2019-04-05 11:26:15
    安装 npm -d install less less-loader 配置 { test: /\.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader' ] } 可以看到把les...
  • 前言:最近刚刚在玩webpack,一开始使用的就是webpack4+,玩到css分离css压缩,百度得知需要两个插件:mini-css-extract-plugin和optimize-css-assets-webpack-plugin,毫不犹豫就npm install了,但是后面的坑。...
  • webpack常见面试题

    千次阅读 2019-06-27 10:57:46
    1.从零开始搭建一个简单的基于webpack的vue开发环境 a.安装webpack npm i webpack -g b.项目初始化 1)新建项目文件夹‘myproject’ 2)创建package.json.。 npm init -y 3)安装vue,webpack,webpack-dev-...
1 2 3 4 5 ... 20
收藏数 10,866
精华内容 4,346
热门标签
关键字:

webpack 分离css中的图片