webpack打包sass
首先,需要支持sass,不管是有ruby环境的sass,还是node-sass,用npm装的sass模块,bootstrap-sass,gulp-sass。。总归要有一个吧!(这里采用node-sass)
其次,还需要webpack的sass-loader,让loader起作用的方法:
要么给scss 文件做个独立entry,
要么在现在entry(或它的依赖)里import 你的scss 文件,
要么在主模块ts文件中require 需要的 scss文件。
不然scss 的loader 都识别不了scss 文件。
然后,配置plugins和loaders
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
main:['./app/main.ts','./app/sass/main-1.scss','./app/sass/main-a.scss','./app/sass/main2.scss'],
//入口中多个 css或者 scss都会被 allChunks: true 设置成打包到一个css文件,
//比如此处的 main-1.scss,main-a.scss,main2.scss都会被打包成 main.css
vendor:[ ]
},
externals:{
"jquery":"jQuery"
},
output: {
path: './dist',
filename: 'js/app.bundle.js',
publicPath:'/'
},
module: {
loaders: [
{test: /\.ts$/, loader: 'ts'},
{test: /\.html$/, loader: 'raw'},
{test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css!postcss')},
{test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")}
]
},
postcss: [autoprefixer()],
resolve: {
extensions: ['', '.js', '.ts', '.scss']
},
plugins: [
new ExtractTextPlugin("assets/css/[name].css", {publicPath: '/assets/',allChunks: true}),
//ExtractTextPlugin.extract 第二个参数(或拆分为多个参数)中 loader 的执行顺序是从右到左,
//即先对引入的.sass
使用sass loader
得到编译后的 css 再使用css-loader
按照正常css-loader
的方式处理。
//sass-loader的”-loader"是可以省略的,所以会看到很多人写的config里面全是"css!sass"什么的,用!分隔。
new HtmlWebpackPlugin({template: './app/index.html'}),
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
//filename : 'vendor_[chunkhash].js',
filename : 'js/vendor.js',
minChunks: Infinity
}),
/*new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),*/
new webpack.DefinePlugin({
app: {
environment: JSON.stringify(process.env.APP_ENVIRONMENT || 'development')
}
})
] };
ExtractTextPlugin.extract([notExtractLoader], loader, [options]) //路径文件名都是options里的
最后,npm start启动webpack进行打包。
参考webpack文档:http://webpack.github.io/docs/stylesheets.html#separate-css-bundle
参考npm ExtractTextPlugin文档:https://www.npmjs.com/package/extract-text-webpack-plugin
更多webpack实用配置:https://segmentfault.com/a/1190000005866410
关于 webpack sass-loader 的url问题: https://segmentfault.com/q/1010000006842394/a-1020000006843757
各种loader综合解析:https://segmentfault.com/a/1190000002551952
webpack打包sass的更多相关文章
- 1、webpack编译打包Sass编译的css进js文件
cnpm install css-loader --save-dev //css-loader 是将css打包进js cnpm install style-loader --save-dev ...
- webpack配置sass模块的加载
webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置.这里不讲webpack的入门,入门的文章,我推荐这篇<webpack入门>. 为了使用sass,我们需要 ...
- Webpack打包进阶
说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...
- Webpack打包构建太慢了?试试几个方法
Webpack是个很流行的打包工具,但其打包速度却一直被吐槽着 如果不用上一些打包的优化建议,单单打包两三个文件就能花上好几秒,放上几十个入口文件依赖几百上千个包的话,几分钟十几分钟妥妥的 本文整理了 ...
- vue-cli+webpack打包配置
vue-cli+webpack打包配置 一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...
- webpack打包和gulp打包工具详细教程
30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解ba ...
- vue webpack打包 -webkit-box-orient 失效
一行省略 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 超出两行省略 overflow: hidden; text-o ...
- webpack 打包
React自发布以来吸引了越来越多的开发者,React开发和模块管理的主流工具webpack也被大家所熟知.那么webpack有哪些优势,可以成为最主流的React开发工具呢? webpack是什么 ...
- webpack打包器简单入门
概念 webpack是一个现代javascript应用程序的模块打包器. 当webpack处理你的应用程序时,它会递归构建一个依赖图(包含了你的应用程序所需要每个模块),然后把这些模块打包到少数几个b ...
随机推荐
- 关于原生AJAX和jQueryAJAX的编程
1.回顾传统Ajax开发步骤 ①:创建xmlHttpRequest对象 var xmlHttp = creatHttpRequest(); ②:绑定回调函数 xmlHttp.onreadystatec ...
- 类结构体 与 byte[] 转换类
public static class StructConvert { public static object BytesToStruct(byte[] bytes, Type strcutType ...
- Unity3D 之连按移动加速
上代码: 效果是连续按W后,加速移动 为物体添加个拖拽效果,方便看运动轨迹. 将下面的脚本绑定到移动的物体上. 不过这里有一点很重要的需要去注意就是该方法不能放在 void FixedUpdate() ...
- Hive over HBase和Hive over HDFS性能比较分析
http://superlxw1234.iteye.com/blog/2008274 环境配置: hadoop-2.0.0-cdh4.3.0 (4 nodes, 24G mem/node) hbase ...
- 2 WPF之XMAL----XMAL概览
转载:http://blog.csdn.net/fwj380891124/article/details/8085458 微软为了把开发模式从网络开发移植到桌面开发和富媒体网络程序的开发上,微软创造了 ...
- SQL SERVER中的逻辑读,预读和物理读
sqlserver:数据存储方式:最小单位是页,每一页8k,sqlserver 对页的读取是具有原子性,也就是说,要么读取完整一页,要么完全不读取,不会有中间状态,而页之间的数据组织结构是B树 但是每 ...
- 你所不知道的Html5那些事(一)
文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后 ...
- 使用grunt运行hintjs任务
最近了解一下hintjs,学习了下使用grunt运行hintjs的方法,记录下来. 1. 下载安装nodejs 2. 安装grunt命令行 npm install -g ...
- 第五篇、HTML标签类型
<!--1.块级标签 独占一行,可以设置高度和宽度 如:div p h ul li -----display: none(隐藏标签) block(让行内标签变块级标签) inline(让块级标 ...
- 编写delegate(明天补充)
delegate基本上是一种callback机制,让别的类在