webpack 处理js中的css_webpack js css - CSDN
精华内容
参与话题
  • 一、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']
                    })
                }
    展开全文
  • webpackcss进行单独打包

    千次阅读 2018-03-30 16:53:16
    我们都知道webpack是可以直接去处理javascript的代码,但是对于css、image、font等,是不能直接处理的,需要使用到loader将其转化成javbascript代码片,然后在对其进行处理 对于处理css,需要使用到的loader是:...

    **

    目标:项目中所有的css文件全部打包到dist下面的css文件夹下面;

    **


    一、webpack对css的处理

    我们都知道webpack是可以直接去处理javascript的代码,但是对于css、image、font等,是不能直接处理的,需要使用到loader将其转化成javbascript代码片,然后在对其进行处理

    对于处理css,需要使用到的loader是:style-loader、css-loader;
    先把这些loader下载下来

    命令行执行

    npm install style-loader css-loader --save-dev

    下载好了之后,webpack.config.js配置如下
    在module的配置里面去配置loader选项

    module:{
        rules:[
          {
            test:/\.css$/,
            use:["style-loader","css-loader"]//注意:loader是从又往左开始加载处理的,所以先执行css-loader
          }
        ],
      },

    但是这样会将css打包到对应的js里面去,那么页面加载的时候会先解析完了js之后再去加载css,这样会影响用户体验

    所以我们需要将css单独提取出来,以link的方式注入到文件里面

    二、使用ExtractTextWebpackPlugin单独抽取css注入

    实现需要下载该插件

    npm init

    更改webpack.config.js配置

    const path = require('path');
    const webpack = require('webpack')
    //引入插件
    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    
    const configs = {
      entry:{
        'commom':['./src/page/common/index.js'],
        'index':['./src/page/index/index.js'],
        'login':['./src/page/login/index.js']
      },
      output:{
        path:path.resolve(__dirname, 'dist'),
        filename:'js/[name].js'
      },
      externals:{
        //可以把外部的变量或模块加载进来,比如cdn引入的jquery,想要按需模块化引入
         'jquery':'window.jQuery'
      },
      module:{
        rules:[
          {
            test:/\.css$/,
            //注意:这里还需要更改一下
            use:ExtractTextPlugin.extract({
              fallback: "style-loader",
              use: "css-loader"
            })
          }
        ]
      },
      plugins:[
        new webpack.optimize.CommonsChunkPlugin({
          name : 'common',
          filename : 'js/base.js'
        }),
        //这里会按照output的路径打包到css文件夹下面对应的css的名字
        new ExtractTextPlugin('css/[name].css')
      ]
    }
    module.exports= configs

    这样就将 entry入口文件里面所引用到的所有的css打包成单独的css文件了,

    如果你的样式文件大小较大,这会做更快提前加载,因为 CSS bundle 会跟 JS bundle 并行加载。

    关于less和sass的文件打包,这里就不多做叙述。可以参照
    https://blog.csdn.net/lhtzbj12/article/details/79188447

    展开全文
  • webpack之引入css

    千次阅读 2018-05-06 15:35:17
    前言:本文演示了如何打包css文件;涉及到的loader: css-loader、style-loader;css-loader的任务:把css文件作为模块打包style-loader的任务:把打包好的css文件动态的插入到html文件的&...默认webpack只会打包js...

    前言:

    • 本文演示了如何打包css文件;
    • 涉及到的loader: css-loader、style-loader;
    • css-loader的任务:把css文件作为模块打包
    • style-loader的任务:把打包好的css文件动态的插入到html文件的<style>标签内


    正文:

    如何利用webpack把样式打包进我们的项目文件?

    在webpack的世界里,一起文件都是模块。

    默认webpack只会打包js代码,如何想要打包其它内容,就需要相对应的loader。


    安装css-loader、style-loader

    $ npm i -D css-loader style-loader

    配置webpack.config.js

    注意:loader处理的顺序:

    • 先是css-loader处理(webpack把mian.css文件作为模块打包)
    • 接着是style-loade处理(让打包后的css可以写入html文件中的<style>)

    在app.js文件中引入main.css

    编辑main.css


    最后,执行 $ npm run build

    在浏览器预览生成的index.html文件,打开控制台可以看到js动态加载的<style>:


    展开全文
  • webpack处理css

    千次阅读 2017-03-29 15:22:14
    在神奇的babel我们提到了babel-loder的使用,那么webpack声称可以处理任何类型的文件,css该怎么处理呢,好,我们来走一遍 首先介绍下style-loader和css-loader,因为处理css文件之前必须要安装这两个模块,至于这...

    神奇的babel中我们提到了babel-loder的使用,那么webpack声称可以处理任何类型的文件,css该怎么处理呢,好,我们来走一遍

    首先介绍下style-loader和css-loader,因为处理css文件之前必须要安装这两个模块,至于这俩是从哪冒出来的,请看点击打开链接,这里详细介绍了各种loader的使用场景。

    npm install css-loader style-loader

    命令行安装成功后,我在src/css下面新建了common.css文件,并且在app.js中通过import引入,要成功引入并生效,需要修改webpack.config.js文件

    好,运行webpack,你会发现common.css真的在生成的index.html中生效了

    讲到这里,再给大家介绍一个神器——postcss-loader

    先来看官网的介绍postcss-loader官网介绍

    老套路,先安装

    npm install postcss-loader --save-dev

     关于配置使用,官网也给了例子

    好,参照官网的使用方法,我们如下配置

    现在postcss-loader的配置基本完成了,是不是可以直接运行使用了呢,不,postcss是需要跟具体插件配合使用的,看官网postcss plugins

    官网中给我们列出了很多可用插件,也提到了当下 最受欢迎的一个——Autoprefixer  ,以此为例我们安装使用一下

    npm install autoprefixer --save-dev

    在这里我采用新建一个postcss.config.js文件的方式

    运行webpack

    好,我们看生成的index.html页面


    好了,webpack处理css先说这么多,最重要的还是解决问题的思路和方式,具体的方法随着社区的完善在不断发生细微的变化,不管怎么变,官方文档的地址不变。








    展开全文
  • 1、webpack概述:webpack是一款加载兼打包工具,它能把各种资源,例如J(含JX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。2、全局安装:在安装Webpack之前,我们的本地环境需要支持node.js。安装...
  • Webpack打包css文件-css-loader+style-loader

    千次阅读 2018-08-02 20:31:18
    一,前言 之前&quot;webpack介绍&quot;...之前说过Webpack只能处理js和Json格式的文件,所以css,图片这些不是webpack能直接处理的资源 这里就用到了loader-加载器,如:css,图片都有其对应的l...
  • loader新建css文件夹,新建common.css文件webpack把任何资源都视为模块,在入口文件app.js中引入需要的模块(可以require方式引用,此处我们统一用es6的import方式引用)在webpack.config.js中,配置css的loader,...
  • webpack的extract-text-webpack-plugin插件

    千次阅读 2019-03-12 14:12:11
    我们先聊聊webpack的一个打包机制,webpack本来只能能打包处理.js文件,但是通过强大的loader之后,可以打包处理各种类型的文件。比如:.css文件等。 表面上webpack通过loader可以打包各种文件了,已经完美了。但是...
  • webpack4打包多个css的两种方法

    万次阅读 2018-07-23 10:18:38
    1.将css打包到js内部 配置文件./conf/webpack.dev.js: const path = require("path"); module.exports = { mode: "development", //打包为开发模式 entry: "./src/main", //入口...
  • webpack中如何使用iconfont字体图标

    万次阅读 2019-07-19 15:01:03
    入坑webpack,开始加载一些图片、js文件什么的都没有报错,今天正好下了iconfont字体,就出现了错误,所以这里分享一下怎么在webpack中使用iconfont。1.修改css中字体文件路径我把css和字体文件放在同级目录下打开...
  • 压缩css:optimize-css-assets-webpack-plugin’插件 const MiniCssExtractPlugin = require(&amp;amp;amp;quot;mini-css-extract-plugin&amp;amp;amp;quot;);//提取css到单独文件的插件 const ...
  • 配置 webpack的打包路径

    万次阅读 2018-11-17 15:12:32
    在 src 目录下面 新建一个 webpack.config.js 文件  按照图示 设置 需要打包的文件 ,配置打包后输出到哪个文件及路径  配置完成以后,直接在终端 输入 webpack 就会实现自动打包,小伙伴赶紧动手试一下 如果...
  • 什么是WebPack,为什么要使用它?

    万次阅读 2017-08-22 20:03:06
    这里是webpack1.0+,如果你用的是2.0+请移步这里 webpack案例:1 豆瓣热映电影 配置好的webpack2脚手架:戳这里 正文从下面开始................. 1、什么是Webpack WebPack可以看做是模块打包机:
  • webpack 独立打包 css 文件

    千次阅读 2016-03-21 13:40:08
    插件地址: extract-text-webpack-plugin安装插件npm install extract-text-webpack-plugin –save-dev使用方法,在 webpack.config.js 增加如下配置plugins: [ new ExtractTextPlugin('app.css') ]实例:编译...
  • *注:以下操作的前提是已全局安装node 和 webpack一:安装webpack和基本环境搭建新建一个工作的文件夹(我取的名字叫Webpack) 打开命令行,cd进入该文件夹//初始化一下npm> E:\work\Webpack>npm init然后按照提示...
  • webpack - autoprefixer的处理

    千次阅读 2017-04-17 12:06:23
    webpack - autoprefixer的处理webpack.config.jsmodule:{ rules:[ { test:/\.css$/, exclude:node_modules, use:["style-loader","css-loader","postcss-loader","px2r
  • webpackwebpack-simple引入css样式文件
  • 1.安装依赖webpack项目依赖npm和nodejsbrew install npm npm install node检查版本npm -v node -v2.安装webpack1.全局安装:具体位置如下图npm install webpack -g2.局部安装:当前项目安装,比如桌面有个webpack...
  • webpack4采坑二:分开打包jscss文件

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

    千次阅读 2018-05-04 15:41:23
    其实,应用sass或者less,是指先将文件交给sass-load或者less-loader处理css文件,然后再交给css-loader、style-loader进行处理。如果你的项目使用了scss。安装sass-loader、node-sass$ npm i -D sass-loader no...
1 2 3 4 5 ... 20
收藏数 57,684
精华内容 23,073
关键字:

webpack 处理js中的css