小昱个人博客
欢迎来到小昱的世界

勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏
使用webpack实现样式的分离
  • 首页 > 前端 > 自动构建
  • 作者:小昱
  • 2017年6月22日 12:43 星期四
  • 浏览:138
  • 字号:
  • 评论:0
  • 一、安装

    npm install --save-dev css-loader style-loader 
    npm install --save-dev extract-text-webpack-plugin

    二、基础代码编写

    index.js

    module.exports = {
        module: {
            rules: [{
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }]
        }
    }

    static/css/test.css

    html,body{
      width: 100%;
      height: 100%;
      background-color: #ff0;
    }

    这样,CSS 会跟你的 JavaScript 打包在一起,并且在初始加载后,通过一个 <style> 标签注入样式,然后作用于页面。编写上述代码,可以看到整个网页都被渲染为黄色。

    这里有一个缺点就是,你无法使用浏览器的能力,去异步且并行去加载 CSS。取而代之的是,你的页面需要等待整个 JavaScript 文件加载完,才能进行样式渲染。

    webpack 能够用 ExtractTextWebpackPlugin 帮助你将 CSS 单独打包,以解决以上问题。

    三、使用 ExtractTextWebpackPlugin

    index.js

    var webpack = require('webpack');
    var path = require('path');
    var ExtractTextPlugin = require('extract-text-webpack-plugin');
    
    module.exports = {
        entry: {
            main: './index.js' //Notice that we do not have an explicit vendor entry here
        },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, 'dist')
        },
        module: {
            rules: [{
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: 'css-loader'
                })
            }]
        },
        plugins: [
            // 指定生成的文件路径
            new ExtractTextPlugin('static/css/style.css')
        ]
    }

    static/css/test.css

    html,body{
      width: 100%;
      height: 100%;
      background-color: #ff0;
    }

    static/css/test2.css

    #box{
      width: 100px;
      height: 100px;
      background-color: #f00
    }

    index.html

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <link rel="stylesheet" href="dist/static/css/style.css">
      <script src="dist/main.js"></script>
    </head>
    <body>
      <div id="box"></div>
    </body>
    </html>

    此时只需要在对应的html中添加样式引入即可。可以看到整个网页呈现黄色,里面有一个红色的块。查看dist/static/css/style.css可以更清晰的看出

    html,body{
      width: 100%;
      height: 100%;
      background-color: #ff0;
    }#box{
      width: 100px;
      height: 100px;
      background-color: #f00
    }




      您阅读这篇文章共花了:  
    二维码加载中...
    本文作者:小昱      文章标题: 使用webpack实现样式的分离
    本文地址:http://www.xiaoyulive.top/?post=94
    版权声明:若无注明,本文皆为“小昱个人博客”原创,转载请保留文章出处。
    返回顶部| 首页| 碰碰手气| 捐赠支持| 手机版本|后花园

    Copyright © 2016-2017 小昱个人博客 滇ICP备16006294号