webpack实战css加载

webpack实战

1. 加载css的2中情况

• 行内加载

• 单独生成css文件加载

  1.1 行内加载

  我们使用webpack2对不同的css,stylus,已经bootstrap进行编译和加载，废话不多说，直接上代码结构

css配置.png

// 把css变成style放入页面
npm install --save style-loader
// 解析css的loader
npm install --save css-loader
// 解析stylus的stylus-loader
npm install --save stylus-loader
// 安装bootstrap 
npm install --save bootstrap
// 由于bootstrap有一些字体图标，所以需要安装url-loader解析路径
npm install --save url-loader
// 习惯性的安装下webpack编译
npm install --save webpack

• 开始编写webpack.config.js

  // main.js
  const path = require('path');
  module.exports = {
    entry: './main.js',
    output: {
      path: path.resolve(__dirname,'./build'),
      filename: 'index.js'
    },
    module: {
      rules: [
        {test: /\.styl$/,use: ['style-loader','css-loader','stylus-loader']},
        {test: /\.(svg|woff|woff2|eot|ttf)$/,use:['url-loader']},
        {test: /\.css$/, use:['style-loader', 'css-loader']}
      ]
    }
  }
  

• 编译文件main.js

  // 像引入js一样的引入css
  import  './src/index.css'
  import 'bootstrap/dist/css/bootstrap.css'
  import './src/stylus.styl'
  
  console.log('hello world');
  

• 相应的源文件

  /*index.css*/
  .sty {
    padding: 50px;
  }
  /*stylus.styl*/
  .sty 
    color red
    background green
  .test 
    color blue
  

• 执行文件

  一定不要觉得css行内样式，你引入导出后的js文件干嘛，不引进肯定是没有效果的，因为这个js的作用就是给你创建一个style标签，并把样式给你塞进去

  
  
  
    
    
    
    
  
  
    
  
      
  代码分割--css
      
  测试代码测试代码
      
  
    
  
      
  
        
          «
        
      
      
  1
      
  2
      
  3
      
  4
      
  5
      
  
        
          »
        
      
    
  
    
    
  
  
  

  ​

  1.2 导出成一个单独的css文件

  如果想单独的把css分离出来，就需要一个插件

• extract-text-webpack-plugin

  1. 安装extract-text-webpack-plugin npm install --save-dev extract-text-webpack-plugin

  2. 可以在webpack.config.js的plugins使用

     const ExtractTextPlugin = require("extract-text-webpack-plugin")
     plugins: [
       new ExtractTextPlugin("styles")  //接受一个导出的名字
     ]
     // 在相应的module中使用 ExtractTextPlugin.extract()
     // 接受一个对象参数1. 执行的回调函数 2. 使用的各种loader
      {
        test: /\.css$/,
        exclude: ['node_modules'],
        use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader' // 也可以是一个数组
        })      
     }
     

• webpack.config.js的编写

  const path = require('path');
  const ExtractTextPlugin = require('extract-text-webpack-plugin')
  module.exports = {
    entry: './main.js',
    output: {
      path: path.resolve(__dirname,'./build'),
      filename: 'index.js'
    },
    module: {
      rules: [
        {
          test: /\.styl$/,
          use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'stylus-loader']
        })
        },
        {test: /\.(svg|woff|woff2|eot|ttf)$/,use:['url-loader']},
        {
          test: /\.css$/,exclude: ['node_modules'],
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader'
          })      
        }
      ]
    },
    plugins: [
      new ExtractTextPlugin('styles.css')
    ]
  }
  

• index.html的不同

  由于我们已经把css导出到一个文件中了，需要如果只是样式的话，可以不再导入js的文件， 可以看看webpack导出的js文件,没有样式了。

打包后的文件.png

​