zoukankan      html  css  js  c++  java
  • 关于webpack编译scss文件

    css加载器文件通常和extract-text-webpack-plugin一块使用,我们可以在源文件src目录下写scss文件,然后通过webpack编译成css文件到输出目录public,这个目录就是我们网站需要引用的目录.

     1 var webpack = require('webpack');
     2 var HtmlWebpackPlugin = require('html-webpack-plugin');
     3 var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
     4 var extractCss = new ExtractTextWebpackPlugin("css/[name].css");//这里的参数是配置编译后的css路径和文件名,相对于output里的path选项
     5 var path = require('path');
     6 module.exports = {
     7     resolve:{
     8         extentions:["",".scss"]
     9     },
    10     entry:{
    11         main:__dirname + '/app/main.js',
    12         index:__dirname + '/app/index.js'
    13     },
    14     output:{
    15         path:__dirname + '/public', //通过HtmlWebpackPlugin插件生成的html文件存放在这个目录下面
    16         filename:'/js/[name].js', //编译生成的js文件存放到根目录下面的js目录下面,如果js目录不存在则自动创建
    17     },
    18     module:{
    19         loaders:[
    20             {test:/.scss$/,loader:extractCss.extract(['css','sass'])}
    21         ]
    22     },
    23     sassLoader:{
    24         includePaths:[path.resolve(__dirname,'./app/css')]
    25     },
    26     plugins:[
    27         new HtmlWebpackPlugin({title:'custom title2',template:__dirname + '/public/tempIndex.html'}),
    28         extractCss
    29     ]
    30 }

     Note:new ExtractTextWebpackPlugin("css/[name].css"),如果用了[name]占位符的形式,只编译引用了scss文件的入口文件,且生成的css文件名与入口文件对应。

    如果有多个入口文件都引入了同一个scss文件,且entry属性配置了vendor对象,则生成一个vendor.css文件,这个vendor.css文件对应的源码是入口文件共同引用的scss文件(webpack.optimize.CommonsChunkPlugin不仅能提取公共的js文件还能提取公共的css文件),如果没有配置vendor则分别生成多个与入口文件同名的css文件。

    如果多个入口文件引用的是不同的scss文件,不管entry属性有没有配置vendor对象,都生成多个与入口文件对应的同名css文件。

    通常情况下都会使用[name]占位符,如果只有一个入口节点引用了scss文件且只引用了一个scss文件,则可以不用占位符,可以指定任意名称。

  • 相关阅读:
    CSS盒子模型
    getContextPath、getServletPath、getRequestURI、request.getRealPath的区别
    MYSQL中的CASE WHEN END AS
    单点登录的精华总结
    git&github
    June 21st 2017 Week 25th Wednesday
    June 20th 2017 Week 25th Tuesday
    June 19th 2017 Week 25th Monday
    June 18th 2017 Week 25th Sunday
    June 17th 2017 Week 24th Saturday
  • 原文地址:https://www.cnblogs.com/toward-the-sun/p/6166431.html
Copyright © 2011-2022 走看看