美文网首页我爱编程
webpack实战css加载

webpack实战css加载

作者: sunny519111 | 来源:发表于2017-07-03 17:42 被阅读528次

    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标签,并把样式给你塞进去

      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>my Vue App</title>
      </head>
      <body>
        <div id="app">
          <h1 class="sty">代码分割--css</h1>
          <h2 class="test">测试代码测试代码</h2>
          <nav aria-label="Page navigation">
        <ul class="pagination">
          <li>
            <a href="#" aria-label="Previous">
              <span aria-hidden="true">«</span>
            </a>
          </li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li>
            <a href="#" aria-label="Next">
              <span aria-hidden="true">»</span>
            </a>
          </li>
        </ul>
      </nav>
        </div>
        <script src="./build/index.js"> </script>
      </body>
      </html>
      

      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文件,没有样式了。

      <!--需要引入相应的css文件-->
      <link rel="stylesheet" href="./build/styles.css">
      
    打包后的文件.png

    相关文章

      网友评论

        本文标题:webpack实战css加载

        本文链接:https://www.haomeiwen.com/subject/fyrzcxtx.html