webpack4对第三方库css，项目全局css和vue内联css文件提取到单独的文件(二十二)

在讲解提取css之前，我们先看下项目的架构如下结构：

### 目录结构如下：
demo1                                       # 工程名
|   |--- dist                               # 打包后生成的目录文件
|   |--- node_modules                       # 所有的依赖包
|   |--- app
|   | |---index
|   | | |-- views                           # 存放所有vue页面文件
|   | | | |-- index.vue
|   | | | |-- list.vue
|   | | |-- components                      # 存放vue公用的组件
|   | | |-- js                              # 存放js文件的
|   | | |-- css
|   | | | |-- base.css
|   | | | |-- index.css
|   | | |-- store                           # store仓库
|   | | | |--- actions.js
|   | | | |--- mutations.js
|   | | | |--- state.js
|   | | | |--- mutations-types.js
|   | | | |--- index.js
|   | | |-- app.js                          # vue入口配置文件
|   | | |-- router.js                       # 路由配置文件
|   |--- views
|   | |-- index.html                        # html文件
|   |--- webpack.config.js                  # webpack配置文件
|   |--- .gitignore
|   |--- README.md
|   |--- package.json
|   |--- .babelrc                           # babel转码文件

我们都知道提取css的插件是使用 extract-text-webpack-plugin 这个插件，但是在webpack4中需要如下安装该插件：

npm i [email protected] -D

首先想让项目里面的css打包生效的话，有二种方式，第一种是使用 style-loader自动将css代码插入到head标签style内，第二种方式是使用 extract-text-webpack-plugin 插件单独提取一个css文件，然后在页面上引入该css文件即可。

下面我们分别来介绍 第三方库css文件，项目全局的css，及vue中内联的css或stylus样式是如何提取到单独的文件内的。

首先在介绍之前，我们编写全局的css的话，需要抛弃掉stylus了，为什么要抛弃掉呢？因为styl文件和extract-text-webpack-plugin 插件一起使用的话会报错，比如如下配置代码：

module.exports = {
  module: {
    rules: [
      {
        // 使用正则去匹配
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: ‘style-loader‘,
            options: {
              singleton: true // 表示将页面上的所有css都放到一个style标签内
            }
          },
          use: [
            {
              loader: ‘style-loader‘,
              options: {}
            },
            {
              loader: ‘css-loader‘,
              options: {
                minimize: true
              }
            },
            {
              loader: ‘postcss-loader‘,
              options: {
                ident: ‘postcss‘,
                plugins: [
                  require(‘postcss-cssnext‘)(),
                  require(‘cssnano‘)(),
                  require(‘postcss-pxtorem‘)({
                    rootValue: 16,
                    unitPrecision: 5,
                    propWhiteList: []
                  }),
                  require(‘postcss-sprites‘)()
                ]
              }
            },
            {
              loader: ‘stylus-loader‘,
              options: {}
            }
          ]
        })
      }
    ]
  }
}

报错信息内容如下：

可以看这个文章(https://segmentfault.com/q/1010000009432668), 也是在讲webpack配置styl+postcss+ExtractTextPlugin错误的问题。

因此对于项目全局的css文件建议直接使用css后缀即可，然后我就想在项目的入口文件app.js 这样引入css文件，如下：

// 引入element组件化框架
import ElementUI from ‘element-ui‘;
import ‘element-ui/lib/theme-chalk/index.css‘;

// 引入样式文件
import ‘./css/index.css‘;

如上代码，第三方库文件是饿了么vue组件的样式，项目全局的css文件是 css/index.css, 如上这样引入进来，index.css
代码如下：

@import ‘./base.css‘;
body {
  font-size: 18px;
  display: flex;
}

css/base.css 代码如下：

body, p , div {
  margin: 0;
  padding: 0;
}

然后对于 vue 文件内部编写css的话，如下使用stylus编写的，代码如下：

<style lang="stylus">
  #list-container
    width 100%
</style>

<template>
  <div id="list-container">hello world</div>
</template>
<script type="text/javascript">
  export default {
    data() {
      return {

      }
    }
  }
</script>

因此webpack.config.js 部分代码如下配置：

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

// 引入打包html文件
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: ‘style-loader‘,
            options: {
              singleton: false // 为true表示将页面上的所有css都放到一个style标签内
            }
          },
          use: [
            {
              loader: ‘css-loader‘,
              options: {
                minimize: true
              }
            },
            {
              loader: ‘postcss-loader‘,
              options: {
                ident: ‘postcss‘,
                plugins: [
                  require(‘postcss-cssnext‘)(),
                  require(‘cssnano‘)(),
                  require(‘postcss-pxtorem‘)({
                    rootValue: 16,
                    unitPrecision: 5,
                    propWhiteList: []
                  }),
                  require(‘postcss-sprites‘)()
                ]
              }
            }
          ]
        })
      },
      {
        test: /\.vue$/,
        loader: ‘vue-loader‘,
        options: {
          // extractCSS: true,
          loaders: {
            css: ExtractTextPlugin.extract({
              use: ‘css-loader‘,
              fallback: ‘vue-style-loader‘
            }),
            styl: ExtractTextPlugin.extract({
              use: ‘css-loader!stylus-loader‘,
              fallback: ‘vue-style-loader‘
            })
          },
          postLoaders: {
            html: ‘babel-loader‘
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      hash: true, //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
      template: ‘./views/index.html‘ // 模版文件
    }),
    new ClearWebpackPlugin([‘dist‘]),
    new ExtractTextPlugin({
      filename: process.env.NODE_ENV === ‘production‘ ? ‘[name].[contenthash:7].css‘ : ‘bundle.css‘,
      allChunks: true
    })
  ]
};

然后在项目中运行 npm run dev 打包，可以看到打包后的bundle.css代码如下信息：

如上打包会把 base.css 和 index.css 及 vue的样式文件都打包到 bundle.css文件内。

但是vue内联样式会打包到 head内部的style标签中，如下截图所示：

理解ExtractTextWebpackPlugin.extract()方法

ExtractTextWebpackPlugin.extract({
  fallback:{
    loader: ‘style-loader‘,
    options: {
      singleton: false // 为true表示将页面上的所有css都放到一个style标签内
    }
  },
  use:[]
});

fallback：指编译后用什么loader来提取css文件。例如使用style-loader, 然后上面的options是选项，设置singleton为false的话，可以把css文件单独提取出来，如果为true的话，会将页面上所有的css文件都放在一个style标签内。

use：指需要什么样的loader去编译文件。 如.css文件使用css-loader，如下：

{
  loader: ‘css-loader‘,
  options: {
    minimize: true
  }
}

现在我们需要解决的是把所有的css文件打包到一个文件里面去。其实很简单只要把vue中的配置文件 extractCSS: true, 会把vue中的样式文件提取出来 打开就可以了，如下部分配置代码：

{
  test: /\.vue$/,
  loader: ‘vue-loader‘,
  options: {
    extractCSS: true, // 会把vue中的样式文件提取出来
    loaders: {
      css: ExtractTextPlugin.extract({
        use: ‘css-loader‘,
        fallback: ‘vue-style-loader‘
      }),
      styl: ExtractTextPlugin.extract({
        use: ‘css-loader!stylus-loader‘,
        fallback: ‘vue-style-loader‘
      })
    },
    postLoaders: {
      html: ‘babel-loader‘
    }
  }
},

然后执行打包命令，再看下效果如下所示：

JS代码如下所示：

因此所有的webpack.config.js 代码如下：

const path = require(‘path‘);

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

// 清除dist目录下的文件
const ClearWebpackPlugin = require(‘clean-webpack-plugin‘);

const webpack = require(‘webpack‘);

// 引入打包html文件
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

// 引入HappyPack插件
const HappyPack = require(‘happypack‘);

// 引入 ParallelUglifyPlugin 插件
const ParallelUglifyPlugin = require(‘webpack-parallel-uglify-plugin‘);

// 引入 webpack-deep-scope-plugin 优化
const WebpackDeepScopeAnalysisPlugin = require(‘webpack-deep-scope-plugin‘).default;

// 引入 DllReferencePlugin
const DllReferencePlugin = require(‘webpack/lib/DllReferencePlugin‘);

module.exports = {
  // 入口文件
  entry: {
    main: ‘./app/index/app.js‘
  },
  output: {
    filename: process.env.NODE_ENV === ‘production‘ ? ‘[name].[contenthash].js‘ : ‘bundle.js‘,
    // 将输出的文件都放在dist目录下
    path: path.resolve(__dirname, ‘dist‘)
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: ‘style-loader‘,
            options: {
              singleton: false // 为true表示将页面上的所有css都放到一个style标签内
            }
          },
          use: [
            {
              loader: ‘css-loader‘,
              options: {
                minimize: true
              }
            },
            {
              loader: ‘postcss-loader‘,
              options: {
                ident: ‘postcss‘,
                plugins: [
                  require(‘postcss-cssnext‘)(),
                  require(‘cssnano‘)(),
                  require(‘postcss-pxtorem‘)({
                    rootValue: 16,
                    unitPrecision: 5,
                    propWhiteList: []
                  }),
                  require(‘postcss-sprites‘)()
                ]
              }
            }
          ]
        })
      },
      {
        test: /\.(png|jpg)$/,
        use: [‘happypack/loader?id=image‘]
      },
      {
        test: /\.js$/,
        // 将对.js文件的处理转交给id为babel的HappyPack的实列
        use: [‘happypack/loader?id=babel‘],
        // loader: ‘babel-loader‘,
        exclude: path.resolve(__dirname, ‘node_modules‘) // 排除文件
      },
      {
        test: /\.vue$/,
        loader: ‘vue-loader‘,
        options: {
          extractCSS: true, // 会把vue中的样式文件提取出来
          loaders: {
            css: ExtractTextPlugin.extract({
              use: ‘css-loader‘,
              fallback: ‘vue-style-loader‘
            }),
            styl: ExtractTextPlugin.extract({
              use: ‘css-loader!stylus-loader‘,
              fallback: ‘vue-style-loader‘
            })
          },
          postLoaders: {
            html: ‘babel-loader‘
          }
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 处理图片
        use: {
          loader: ‘url-loader‘, // 解决打包css文件中图片路径无法解析的问题
          options: {
            // 打包生成图片的名字
            name: ‘img/[name].[contenthash:7].[ext]‘,
            limit: 1024
          }
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // 处理字体
        use: {
          loader: ‘file-loader‘
        }
      },
      //媒体文件处理
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: ‘url-loader‘,
        options: {
          limit: 40000,
          name: ‘media/[name].[hash:7].[ext]‘
        }
      }
    ]
  },
  resolve: {
    alias: {
      ‘vue$‘: ‘vue/dist/vue.esm.js‘
    },
    modules: [
      path.join(__dirname, ‘./app‘),
      ‘node_modules‘
    ],
    extensions: [‘*‘, ‘.js‘, ‘.json‘, ‘.vue‘, ‘.styl‘]
  },
  devtool: ‘cheap-module-eval-source-map‘,
  devServer: {
    port: 8081,
    host: ‘0.0.0.0‘,
    headers: {
      ‘X-foo‘: ‘112233‘
    },
    inline: true,
    overlay: true,
    stats: ‘errors-only‘
  },
  mode: process.env.NODE_ENV === ‘production‘ ? ‘production‘ : ‘development‘,
  plugins: [
    new HtmlWebpackPlugin({
      hash: true, //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
      template: ‘./views/index.html‘ // 模版文件
    }),
    new ClearWebpackPlugin([‘dist‘]),

    new ExtractTextPlugin({
      filename: process.env.NODE_ENV === ‘production‘ ? ‘[name].[contenthash:7].css‘ : ‘bundle.css‘,
      allChunks: true
    }),

    /****   使用HappyPack实例化    *****/
    new HappyPack({
      // 用唯一的标识符id来代表当前的HappyPack 处理一类特定的文件
      id: ‘babel‘,
      // 如何处理.js文件，用法和Loader配置是一样的
      loaders: [‘babel-loader‘]
    }),
    new HappyPack({
      id: ‘image‘,
      loaders: [{
        loader: require.resolve(‘url-loader‘),
        options: {
          limit: 10000,
          name: ‘[name].[ext]‘
        }
      }]
    }),
    // 使用 ParallelUglifyPlugin 并行压缩输出JS代码
    new ParallelUglifyPlugin({
      // 传递给 UglifyJS的参数如下：
      uglifyJS: {
        output: {
          /*
           是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，
           可以设置为false
          */
          beautify: false,
          /*
           是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false
          */
          comments: false
        },
        compress: {
          /*
           是否在UglifyJS删除没有用到的代码时输出警告信息，默认为输出，可以设置为false关闭这些作用
           不大的警告
          */
          warnings: false,

          /*
           是否删除代码中所有的console语句，默认为不删除，开启后，会删除所有的console语句
          */
          drop_console: true,

          /*
           是否内嵌虽然已经定义了，但是只用到一次的变量，比如将 var x = 1; y = x, 转换成 y = 5, 默认为不
           转换，为了达到更好的压缩效果，可以设置为false
          */
          collapse_vars: true,

          /*
           是否提取出现了多次但是没有定义成变量去引用的静态值，比如将 x = ‘xxx‘; y = ‘xxx‘  转换成
           var a = ‘xxxx‘; x = a; y = a; 默认为不转换，为了达到更好的压缩效果，可以设置为false
          */
          reduce_vars: true
        }
      }
    }),
    new WebpackDeepScopeAnalysisPlugin(),
    // 设置环境变量信息
    new webpack.DefinePlugin({
      ‘process.env‘: {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    })
  ]
};

github代码查看demo

原文地址：https://www.cnblogs.com/tugenhua0707/p/9912091.html

时间： 2024-10-25 17:10:14

webpack4对第三方库css，项目全局css和vue内联css文件提取到单独的文件(二十二)的相关文章

CSS三种引入方式：内联、页级、外联

1.内联CSS 内联CSS也可称为行内CSS或者行级CSS,它直接在标签内部引入,显著的优点是十分的便捷.高效:但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度不建议采用.通常内联CSS作为测试使用,可以查找代码中bug. 1 <body> 2 <div style="width: 65px;height: 20px;border: 1px solid;">测试元素</div> 3 </body> 2.页级CSS 页级CSS

npm 工具(用来安装和管理nodejs包的一个工具。所有使用nodejs第三方库的项目，都需要在项目初始化的时候 使用 npm init 命令来初始项目)

新建项目 npm init```package.json ```{ "name": "webpackdemo1", 项目名称,包名,不能是grunt或webpack "version": "1.0.0",//项目的版本 "description": "",//项目描述 "main": "index.js",//项目的入口文件 <!-- 项目脚

转载：CSS的组成,三种样式(内联式,嵌入式,外部式),优先级

(仅供自己备份) 原文地址:http://blog.csdn.net/chq11106004389/article/details/50515717 CSS的组成 选择符/选择器+声明(属性+值) 选择符/选择器,指明网页中要应用样式规则的元素,如本例中是p是选择器,它的文字将变成蓝色,而其他的元素(如ol)不会受到影响 声明:当有多条声明时,中间可以英文分号";"分隔 --------------------------------------------------内联式CSS -

非内联css样式获取方法

css样式分为内联样式.内部样式和外部样式,然而object.style.xxx只能够获取内联样式的属性值,内部样式和外部样式的css样式获取不到 js获取方法使用document.defaultView.getComputedStyle().currentStyle() 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 &

CSS的三种样式：内联式，嵌入式，外部式以及他们的优先级

从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码: <p style="color:red";font-size:12px>这里文字是红色.</p> 2:嵌入式,嵌入式css样式.就是能够把css样式代码写在<style type="text/css">XXX</style>标签之间. <head&g

2018.7.1 css项目之模仿满屋花首页css+idv布局实现

可以分开写 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible

8 1 css 2 元素就是标签 2 内联样式 3 css选择器 style ,head ,内部样式表 4 外部样式表 css文件， link标签 ,href,

1 2 3 4 原文地址:https://www.cnblogs.com/anvivi/p/9694814.html

雷观(二十二)：项目开发中，要少做无用功

最近,正在重构一个项目的后台管理系统. 注意到,所有的table列表页,都有个搜索功能.后端的搜索功能,还是需要一点代码去实现.然后,还得去测试一遍. 但是呢,忽然意识到,有的页面根本没有必要增加"搜索"功能. 比如,有个表,实际项目中是"借款人"这个user表.真实环境下,尤其是项目早期过程中,根本不可能有多少"数据"或者说"借款人用户".一页,显示20个,基本上就足够了. 这个时候,增加"搜索"功能这种

Unity3d - RPG项目学习笔记（二十二）

上期工程完成了装备的穿戴功能,本期开始创建装备的卸下功能. 需求: 右键点击装备栏上的装备图标,使其返回至背包中. 需求拆解: 鼠标移动至装备图标上,右键点击,销毁装备,在背包中生成该装备的镜像,完毕. 根据上述思路,这个功能实现起来比较简单: ①首先为EquipmentItem添加BoxCollider,使装备栏中的装备可以被点击: ②对该EquipmentItem添加脚本如下: Class EquipmentItem { private bool isHovering = false; vo