如何设置 webpack 以缩小和组合 scss 和 javascript 之类的 CodeKit?
Posted
技术标签:
【中文标题】如何设置 webpack 以缩小和组合 scss 和 javascript 之类的 CodeKit?【英文标题】:How can I setup webpack to minify and combine scss and javascript like CodeKit? 【发布时间】:2015-01-07 04:32:00 【问题描述】:我在使用 webpack 而不是 Codekit v1.9.3 时遇到问题。我开始从 CodeKit 迁移到 Grunt 和 Gulp,然后了解了 webpack
,这听起来很酷。我似乎无法让它正常工作。
“喜欢 Codekit”意味着我可以:
使用coffeescript
语法编写javascript
将所有脚本源文件和库压缩/丑化并合并到一个文件中
根据需要选择性地包含 bootstrap-sass
(scss) 框架的组件
通过 sass 变量维护一个带有引导自定义的小文件,例如 $brand-primary
使用webpack --watch
在脚本和样式发生更改时自动编译它们
最终得到一个 css 文件和一个脚本文件,可以包含在样式表和脚本标记中。
Codekit 项目设置
Bower 资源:
我目前在项目之外全局存储这些:
~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheets
因为 CodeKit 支持指南针,我的 config.rb
文件中有这个:
add_import_path "~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheets"
项目结构
js/fancybox.js
js/main.js <-- currently the compiled js 'output' file
js/main.coffee
css/styles.css <-- currently the compiled css 'output' file
scss/styles.scss
scss/modules/_bootstrap-customizations.scss
scss/modules/_typography.scss
scss/partials/_header.scss
scss/partials/_footer.scss
styles.scss 的内容
@import "modules/bootstrap-customizations"; # local customizations
@import "bootstrap/variables";
@import "bootstrap/mixins";
... # load bootstrap files as required
@import "bootstrap/wells";
系统设置:
系统:OS X 10.9 节点 - v0.10.32 npm - v2.1.7 zsh - zsh 5.0.7 (x86_64-apple-darwin13.4.0)node 安装了 homebrew 的 brew install node
并且似乎工作正常。
我的尝试
我已经阅读了这些页面:
http://webpack.github.io/docs/configuration.html https://github.com/petehunt/webpack-howto http://webpack.github.io/docs/tutorials/getting-started/ https://www.npmjs.org/package/bootstrap-sass-webpack我多次尝试创建webpack.config.js
文件,我最近的尝试是这个的几个版本:
module.exports =
entry: [
"./node_modules/bootstrap-sass-webpack!./bootstrap-sass.config.js",
"./js/main.coffee"
],
output:
path: __dirname,
filename: "main.js"
,
module:
loaders: [
test: /\.css$/, loader: "style!css"
]
;
Webpack 错误
当我运行 webpack
时,我得到了这个:
ERROR in ./~/bootstrap-sass-webpack/~/css-loader!/Users/cwd/~/sass-loader!./~/bootstrap-sass-webpack/bootstrap-sass-styles.loader.js!./bootstrap-sass.config.js
stdin:1: file to import not found or unreadable: "~bootstrap-sass/assets/stylesheets/bootstrap/variables
NPM 错误
我在尝试npm install bootstrap-sass
时遇到错误,并且在寻找解决方案时没有任何运气。我什至不确定我是否需要这个模块。
npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "bootstrap-sass"
npm ERR! node v0.10.32
npm ERR! npm v2.1.7
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package bootstrap-sass does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer bootstrap-sass-webpack@0.0.3 wants bootstrap-sass@~3.2.0
npm ERR! Please include the following file with any support request:
npm ERR! /Users/cwd/webpack-test/npm-debug.log
混乱的来源
对我来说,webpack 最令人困惑的部分是:
-
应该在哪里添加
require("bootstrap-sass-webpack")
之类的内容 - 是在 webpack.config.js
文件中,还是在 js/main.js
文件中?
这样的模块是否应该在使用 npm install
安装后立即提供给 webpack?
我认为我应该这样做 npm install webpack -g
以便全局安装 webpack,并为其他模块使用 npm install
而不使用 -g
。但是,我没有看到在我的项目中创建任何 node_modules
文件夹。不应该有吗?
如何为require("bootstrap-sass-webpack")
等内容确定/指定搜索路径?
我应该安装哪些节点模块才能做到这一点?我的webpack.config.js
应该是什么样子?
【问题讨论】:
我有一个非常相似的配置,我使用的是基于 gulp 的 exlir,但它调用了 webpack 加载机制。我无法让 bootstrap-sass-webpack 编写任何资产文件,除了显示它们捆绑在一起时称为“file.css”、“file.wof”。没有任何内容写入磁盘。 【参考方案1】:简介
Webpack 主要是一个 JavaScript 捆绑器。它的“原生”语言是 JavaScript,所有其他源都需要一个将其转换为 JavaScript 的加载器。例如,如果您 require()
一个 html 文件...
var template = require("./some-template.html");
...您需要html-loader。结果……
<div>
<img src="./assets/img.png">
</div>
...进入...
module.exports = "<div>\n <img src=\"" + require("./assets/img.png") + "\">\n</div>";
如果加载器不返回 JavaScript,则需要将其“传送”到另一个加载器。
如何加载 SASS 文件
配置加载器
要使用 SASS,您至少需要 sass-loader 和 css-loader。 css-loader 返回一个 JavaScript 字符串。如果要将返回的 JavaScript 字符串导入为StyleSheet,还需要style-loader。
运行npm i sass-loader css-loader style-loader --save
现在你需要对所有匹配/\.scss$/
的文件应用这些加载器:
// webpack.config.js
...
module:
loaders: [
// the loaders will be applied from right to left
test: /\.scss$/, loader: "style!css!sass"
]
...
您还可以将选项作为查询参数传递给node-sass:
test: /\.scss$/, loader: "style!css!sass?includePaths[]=" +
path.resolve(__dirname, "./bower_components/bootstrap-sass/assets/stylesheets/"
由于引导程序通过url()
语句引用图标,css-loader 将尝试将这些资源包含到包中,否则将抛出异常。这就是为什么您还需要file-loader:
// webpack.config.js
...
module:
loaders: [
test: /\.scss$/, loader: "style!css!sass" ,
test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/, loader: "file" ,
]
...
配置入口
要将引导程序包含到您的包中,有几种方法。一种是通过您已经尝试过的多条目选项。我建议在require()
主 sass 文件中使用 单个条目:
// main.js
require("./main.scss");
鉴于您的 includePaths
已配置,那么您可以这样做:
// main.scss
// Set the font path so that url() points to the actual file
$icon-font-path: "../../../fonts/bootstrap";
@import "bootstrap";
请注意,webpack 不会触及 scss 文件中的 import 语句,因为 libsass 没有提供自定义解析器的 api (yet)。
为了防止代码重复,拥有一个单个主 sass 文件也很重要,因为 webpack 会单独编译每个 sass 文件。
通过 npm 安装咖啡加载器后,您的最终 webpack.config.js
应如下所示:
module.exports =
entry: "./js/main.coffee",
output:
path: __dirname,
filename: "main.js"
,
module:
loaders: [
test: /\.scss$/, loader: "style!css!sass" ,
test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/, loader: "file" ,
test: /\.coffee$/, loader: "coffee"
]
;
全局 Webpack?
最好不要全局安装 webpack,因为它是你项目的依赖,因此应该通过 npm 控制。您可以使用package.json
的scripts 部分:
...
"scripts":
"start": "webpack --config path/to/webpack.config.js & node server.js"
那么你只需要运行npm start
【讨论】:
非常感谢您抽出宝贵时间回答这个问题。 基于 webpack“主要是一个 JavaScript 包”的前提,我想知道我们是否要求 webpack 在 CSS 方面做太多事情,这感觉很尴尬。您认为将 Webpack 用于纯 JavaScript ES6 工作流程,将 Gulp 用于 autoprefixer+SASS 工作流程是一种更好的组合,还是您认为我们绝对应该尝试使用一种构建工具方法? 我理解您的担忧,但我看到的一个好处是,webpack 也在处理 CSS 文件中的 url() 语句。将 CSS 视为另一个模块对我来说是完全有意义的。我写了“主要是一个 JavaScript 捆绑器”,因为 JS 是一种通用语言,可以承载 HTML、CSS、Markdown 等任何字符串。 那么,如果没有require
在某处某个文件,就没有办法构建css?我应该坚持使用 gulp/grunt/whatever 来构建 css 吗?
如何使用 sass 添加热重载?以上是关于如何设置 webpack 以缩小和组合 scss 和 javascript 之类的 CodeKit?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 react webpack 设置 bootstrap 4 scss
你如何配置 Webpack 以清除生产缩小的 React 警告?
使用 Webpack、SASS 和 React 在“main.scss”上出现错误“找不到模块”