本文介绍了我如何设置webpack来缩小和结合scss和javascript像CodeKit?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述 29岁程序员,3月因学历无情被辞! 我无法使用webpack,而无法使用 Codekit v1.9.3。我开始工作,从CodeKit移动到Grunt和Gulp,然后了解到 webpack 这听起来很酷。 像Codekit意味着我可以: 使用 coffeescript 语法写 javascript 将所有脚本源文件和库缩小/ ugl化并合并到一个文件中 选择性地包括 bootstrap-sass (scss) 通过sass变量(例如 $ brand-primary $ b $维护一个小型文件b 使用 webpack --watch 在脚本和样式更改时自动编译脚本和样式 最后使用一个css文件以及一个可以包含在样式表和脚本标记中的脚本文件。 Codekit项目设置 资源: 我目前正在全球范围内存储这些项目, p> 〜/ bower_components / twbs-bootstrap-sass / vendor / assets / stylesheets pre> 因为CodeKit支持罗盘,我已经在我的 config.rb 文件中: add_import_path〜/ bower_components / twbs-bootstrap-sass / vendor / assets / stylesheets 项目结构 js / fancybox.js js / main.js< - 目前编译的js'output'文件 js / main.coffee css / styles.css< - 目前编译的css'output'文件 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 @importbootstrap / variables; @importbootstrap / mixins; ...#根据需要加载bootstrap文件 @importbootstrap / wells; 系统设置: 系统:OS X 10.9 node - v0.10.32 zsh - zsh 5.0.7(x86_64-apple-darwin13.4.0) 节点安装了homebrew的 brew安装节点,似乎工作正常。 我尝试了什么 我读过这些网页: 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],输出:{ path:__dirname, filename:main.js},模块:{ loaders:[ {test:/\.css$/,loader:style!css} ] } }; Webpack错误 b $ b 当我运行 webpack 时,我得到: code>错误在./~/bootstrap-sass-webpack/~/css-loader!/Users/cwd/~/sass-loader!./~/bootstrap-sass-webpack/bootstrap-sass-styles。 loader.js!./ bootstrap-sass.config.js stdin:1:要导入的文件未找到或不可读:〜bootstrap-sass / assets / stylesheets / bootstrap / variables p> p>我在尝试 npm install bootstrap-sass 时遇到错误,在搜索解决方案时没有任何运气我甚至不确定我需要这个模块。 npm ERR!Darwin 13.4.0 npm ERR!argvnode/ usr / local / bin / npminstallbootstrap-sass npm ERR!node v0.10.32 npm ERR!npm v2.1.7 npm ERR!code EPEERINVALID npm ERR!peerinvalid软件包bootstrap-sass不满足其兄弟的peerDependencies要求! npm ERR! peerinvalid Peer bootstrap-sass-webpack@0.0.3 want bootstrap-sass@~3.2.0 npm ERR!请包含任何支持请求的以下文件: npm ERR! /Users/cwd/webpack-test/npm-debug.log 混乱来源 对于我来说,最困惑的部分是: 添加 require(bootstrap-sass-webpack)应该在 webpack.config.js 文件或 js / main.js 文件中? 一旦他们安装 npm install ? 我认为我应该做 npm install webpack - g ,以便在全局安装webpack,并使用 npm install 而不使用 -g 其他模块。但是,我没有看到在我的项目中创建任何 node_modules 文件夹。 c>? 我应该安装哪些节点模块才能执行此操作? 解决方案 简介 Webpack主要是JavaScript-bundler。它的本地语言是JavaScript,每个其他源需要一个加载器将其转换为JavaScript。如果你 require()一个html文件例如... var template = require(./ some-template.html); ...您需要使用 html-loader 。它变成... < div> < img src =./ assets / img.png> < / div> ... into ... module.exports =< div> \\\< img src = \+ require(./ assets / img.png)+\> ; \\\< / div>; 如果加载器不返回JavaScript,它需要管道到另一个加载器。 / p> 如何加载SASS文件 h3> 要使用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 ... 模块:{装载器:[ //装载器将从右到左应用 {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将尝试将这些资源包含在bundle中,并抛出异常除此以外。这就是为什么您还需要文件加载器: // webpack.config.js ... 模块:{ loaders:[ {test:/ \ .scss $ /,loader:style!css!sass}, {test:/\.jpe?g $ | \.gif $ | \.png $ | \.svg $ | \.woff $ | \.ttf $ /,loader:file},] } ... pre> 配置条目 要将引导程序包括到捆绑包中,有几种方法。一个是通过您已经尝试过的多输入选项。我建议您使用单个条目,其中 require()您的主要sass文件: // main.js require(./ main.scss); 由于配置了 includePaths 可以做: // main.scss //设置字体路径,让url()指向实际文件 $ icon-font-path:../../../fonts/bootstrap; @importbootstrap; 请注意,webpack不接触scss文件中的import语句,因为libsass没有api a href =https://github.com/sass/libsass/issues/21>尚未)提供自定义解析器。 防止代码因为webpack单独编译每个sass文件,所以重要的是有一个单个主sass文件。 通过npm,您的最终 webpack.config.js 应如下所示: module.exports = { entry:./js/main.coffee, output:{ path:__dirname, filename:main.js},模块:{ loaders:[ {test:/\.scss$/,loader:style!css!sass}, {test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/,loader:file}, {test:/\.coffee$/,loader:coffee} ] } }; Webpack全球? b 最好不在全球安装webpack,因为它是项目的依赖项,因此应该通过npm来控制。您可以使用 package.json 的脚本部分, code>: { ... scripts:{start:webpack --config path / to / webpack.config.js& node server.js} } 然后你只需要运行 npm start I'm having trouble using webpack instead of Codekit v1.9.3. I started working to move from CodeKit to Grunt and Gulp, and then learned about webpack which sounds very cool. I just can't seem to get it working correctly."Like Codekit" means I can:Write javascript with the coffeescript syntaxHave all script source files and libraries minified / uglified and combined into one fileSelectively include components of the bootstrap-sass (scss) framework as neededMaintain a small file with bootstrap customizations via sass variables, like $brand-primaryUse webpack --watch to compile both scripts and styles automatically when they are changedEnd up with one css file and one script file that can be included with a stylesheet and script tag.Codekit Project SetupBower resources:I'm currently storing these globally, outside of the project:~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheetsBecause CodeKit supports compass, I've got this in my config.rb file:add_import_path "~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheets"Project Structurejs/fancybox.jsjs/main.js <-- currently the compiled js 'output' filejs/main.coffeecss/styles.css <-- currently the compiled css 'output' filescss/styles.scssscss/modules/_bootstrap-customizations.scssscss/modules/_typography.scssscss/partials/_header.scssscss/partials/_footer.scssContents of styles.scss@import "modules/bootstrap-customizations"; # local customizations@import "bootstrap/variables";@import "bootstrap/mixins";... # load bootstrap files as required@import "bootstrap/wells";System Setup:system: OS X 10.9node - v0.10.32npm - v2.1.7zsh - zsh 5.0.7 (x86_64-apple-darwin13.4.0)node was installed with homebrew's brew install node and seems to be working fine otherwise.What I've TriedI've read over these pages:http://webpack.github.io/docs/configuration.htmlhttps://github.com/petehunt/webpack-howtohttp://webpack.github.io/docs/tutorials/getting-started/https://www.npmjs.org/package/bootstrap-sass-webpackI've attempted to create a webpack.config.js file several times, my latest attempt was several versions of this: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 ErrorWhen I run webpack I get this:ERROR in ./~/bootstrap-sass-webpack/~/css-loader!/Users/cwd/~/sass-loader!./~/bootstrap-sass-webpack/bootstrap-sass-styles.loader.js!./bootstrap-sass.config.jsstdin:1: file to import not found or unreadable: "~bootstrap-sass/assets/stylesheets/bootstrap/variablesNPM ErrorI get an error when attempting to npm install bootstrap-sass, and not had any luck when searching for a solution. I'm not even sure I need this module.npm ERR! Darwin 13.4.0npm ERR! argv "node" "/usr/local/bin/npm" "install" "bootstrap-sass"npm ERR! node v0.10.32npm ERR! npm v2.1.7npm ERR! code EPEERINVALIDnpm 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.0npm ERR! Please include the following file with any support request:npm ERR! /Users/cwd/webpack-test/npm-debug.logSources of ConfusionThe most confusing parts of webpack for me are:Where should things like require("bootstrap-sass-webpack") be added - is it in the webpack.config.js file, or in the js/main.js file?Should modules like this available to webpack as soon as they are installed with npm install ?I thought that I should do npm install webpack -g so that webpack was installed globally, and use npm install without the -g for the other modules. However, I don't see any node_modules folder being created in my project. Shouldn't there be one?How are the search paths determined / specified for things like require("bootstrap-sass-webpack") ?What node modules should I install to be able to do this? And what should my webpack.config.js look like? 解决方案 IntroductionWebpack is mainly a JavaScript-bundler. Its "native" language is JavaScript and every other source requires a loader which transforms it to JavaScript. If you require() an html-file for example...var template = require("./some-template.html");...you'll need the html-loader. It turns...<div> <img src="./assets/img.png"></div>...into...module.exports = "<div>\n <img src=\"" + require("./assets/img.png") + "\">\n</div>";If a loader doesn't return JavaScript, it needs to be "piped" to another loader.How to load SASS-filesConfigure loadersIn order to use SASS you'll need at least the sass-loader and the css-loader. The css-loader returns a JavaScript string. If you want to import the returned JavaScript string as StyleSheet, you'll also need the style-loader.Run npm i sass-loader css-loader style-loader --saveNow you need to apply these loaders on all files that match /\.scss$/:// webpack.config.js...module: { loaders: [ // the loaders will be applied from right to left { test: /\.scss$/, loader: "style!css!sass" } ]}...You can also pass options to node-sass as query parameters:{ test: /\.scss$/, loader: "style!css!sass?includePaths[]=" + path.resolve(__dirname, "./bower_components/bootstrap-sass/assets/stylesheets/"}Since bootstrap references icons via the url() statement, the css-loader will try to include these assets into the bundle and will throw an exception otherwise. That's why you'll also need the file-loader:// webpack.config.js...module: { loaders: [ { test: /\.scss$/, loader: "style!css!sass" }, { test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/, loader: "file" }, ]}...Configure entryTo include bootstrap into your bundle there are several ways. One is via the multi-entry option as you've already tried. I recommend to use a single entry where you require() your main sass-file:// main.jsrequire("./main.scss");Given that your includePaths are configured then you can do:// main.scss// Set the font path so that url() points to the actual file$icon-font-path: "../../../fonts/bootstrap";@import "bootstrap";Please note that import statements inside scss-files are not touched by webpack because libsass has no api (yet) to provide custom resolvers.To prevent code duplication it's also important to have a single main sass-file, because webpack compiles every sass-file individually.With the coffee-loader installed via npm your final webpack.config.js should look like: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 globally?It's best not to install webpack globally, because it's a dependency of your project and thus should be controlled via npm. You can use the scripts-section of your package.json:{ ... "scripts": { "start": "webpack --config path/to/webpack.config.js & node server.js" }}Then you just need to run npm start 这篇关于我如何设置webpack来缩小和结合scss和javascript像CodeKit?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
07-23 06:17
查看更多