Articles of webpack 2

Webpack 2和SASS:一个SASS脚本无法find它的字体依赖关系时,它是@导入到另一个SASS文件

我想利用Webpack 2和Materialise挖掘现代前端开发。 因为我可能会自定义样式,所以我想将Materialise SASS文件导入到我自己的SASS文件中,这样我就可以覆盖东西了。 但是,如果我这样做,Webpack 2无法编译我的SASS文件了,因为它没有findMaterialize字体。 这是我目前的webpack.config.js ,从互联网上复制: const ExtractTextPlugin = require('extract-text-webpack-plugin'); const extractSass = new ExtractTextPlugin({ filename: "style.css", disable: process.env.NODE_ENV === "development" }); module.exports = { entry: './src/js/index.js', output: { path: __dirname + '/public/dist', filename: 'app.js' }, module: { rules: [ { test: /\.scss$/, use: extractSass.extract({ use: [{ loader: "css-loader" }, { loader: "sass-loader" […]

我怎样才能避免在Webpack 2的configuration中使用可选的解决scheme?

我正在玩新版本的Webpack的第二个版本。 我收到以下错误消息。 无效的configuration对象…这些属性是有效的: 对象{amd?,bail?,…,devtool?, entry ,…,output?,performance?,plugins?,profile ?, recordsInputPath?,recordsOutputPath?,recordsPath ?, resolve? ,…} 我也有以下错误。 configuration.resolve.extensions [0]不应该是空的。 这是令人困惑的,因为在第一条消息中,问号暗示parsing是可选的(与没有问号表示的其他突出显示的选项条目相反)。 我在这方面对于问号的含义是否无知? 这是一个错字吗? 我是否被完全不同的东西弄糊涂了?

Node.js + Typescript + Webpack =找不到模块

我是新的Webpack,Node.js和Typescript,我无法configuration我的开发环境。 当运行webpack编译我的src/server.ts来生成/server/bundle.js我得到这个错误: ERROR in ./src/server.ts Module not found: Error: Can't resolve 'hapi' in '/Volumes/Dados/giovane/dev/studio-hikari/nodang/nodang-api/src' @ ./src/server.ts 3:11-26 该项目的架构是: src/server.ts : import * as Hapi from 'hapi'; const server = new Hapi.Server(); webpack.config.js : const path = require('path'); module.exports = { entry: './src/server.ts', output: { filename: './server/bundle.js' }, resolve: { extensions: ['.ts'], modules: [ path.resolve('src'), path.resolve('node_modules') […]

如何创build/生成/从我的webpack 2configuration文件导出用于我的React代码里面?

我将NODE_ENVvariables传递到package.json webpack.config中,以便返回包含localhost或production的API端点的对象。 1)package.json "scripts": { "dev": "NODE_ENV=development webpack-dev-server –history-api-fallback", "prod": "NODE_ENV=production webpack -p", "build": "NODE_ENV=production webpack -p" } 2)endpoints.js function endpoints(env) { let prefix = env === 'development' ? 'http://localhost' : ''; return { "login": `${prefix}/app/api/login` } } module.exports = endpoints; 3)webpack.config const webpack = require('webpack') const HtmlWebpackPlugin = require("html-webpack-plugin"); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const […]

Webpack 2无法parsingwebpack.config.js中的入口点

尝试通过webpack 2构build应用程序时收到错误消息。 我的应用程序文件夹结构如下所示: / | – dist/ | | – src/ | | | | – modules/ | | | | | | – module1.js | | | | – index.js * | | _ webpack.config.js | | – package.json 我的webpack.config.js文件的相关部分在这里: /** * Requires */ const path = require('path'); /** * Variables */ const PATHS […]

Webpack定制插件来定义一个模块

我正在尝试为Webpack编写一个小的自定义插件,它将构build一个自定义的Modernizr对象并将其公开。 我发现这个插件和这个加载器 ,但加载器似乎hacky(它需要一个空文件.modernizrrc即使我直接传递选项),插件只能创build一个单独的文件。 我从前面的插件中借用了一些代码,但是不知道最后一步(如何在构build的文件中公开Modernizr ): const modernizr = require('modernizr'), ConcatSource = require('webpack-sources/lib/ConcatSource'), CachedSource = require('webpack-sources/lib/CachedSource'); class BuildModernizrPlugin { constructor(props = {}) { let plugin = this; plugin._props = props; } apply(compiler) { let plugin = this; compiler.plugin('after-compile', (compiler, callback) => { modernizr.build(plugin._props, result => { plugin._modernizr = result; callback(); }); }); compiler.plugin('emit', (compilation, callback) => […]

如何使用Webpack注入全局variables?

我需要一个在编译时生成的Map的特定实例,以便将其与webpack捆绑在一起的代码提供给我。 我的用例,如果是一个Map的实例,但这个问题真的适用于任何variables。 webpack.DefinePlugin将无法正常工作,因为我的Map实例无法存活。 我可以反序列化/序列化,但这似乎效率低下。 options.externals将无法工作,因为我require一个外部模块被捆绑器忽略。 我已经能够通过在global设定价值来实现这一目标,但我不确定这是否是最好的方法。 这是一个可怜的例子: webpack.config.js : const myVar = new Map([ ['a test value', () => {}] ]); // is there a better way? global.myVar = myVar; module.exports = { entry: './entry.js', output: { filename: './output.js' }, target: 'node', } entry.js : console.log(global.myVar) //=> Map { { "a test value", [Function] } […]

Webpack需要dynamic的文件

我正在尝试使用Webpackdynamic地要求文件,如下所示: this.svg = require(`resources/assets/images/svg/${this.name}.svg`); 当然,因为这个代码只能在NodeJS中运行,所以Webpack不知道this.name是什么,并创build一个上下文。 在上下文中,它抓取来自该特定目录的所有文件,并将其阻塞到我的javascript包中。 我不想从这个目录中的所有文件,但我只是想要这个确切的名字。 由于在运行时无法实现,有没有办法提供Webpack可以运行的静态文件列表? 有点像forEach与要求。

提高webpack图像/ CSS编译时间?

我最近接pipe了一个前端项目,并注意到dev脚本的初始启动时间(带有热模块重装等)需要很长时间,大约2分钟。 将verbose设置为true ,我意识到几乎所有的时间都花在重新编译甚至没有改变的CSS和图像上。 webpack构build的输出是一个很长的列表,如下所示: ——— Webpack stdout for /Users/myuser/Documents/repos/myApp-frontend/client/modules/App/background.jpg ——— Hash: 0f500227a855ef9eb67c Version: webpack 2.1.0-beta.8 Time: 68ms Asset Size Chunks Chunk Names .webpack.res.1504199219496_875923.js 132 kB 0 [emitted] main + 1 hidden modules ——— Webpack stdout for /Users/myuser/Documents/repos/myApp-frontend/client/modules/App/AppAuthorized.css ——— Hash: 83f1c479b77c7539baeb Version: webpack 2.1.0-beta.8 Time: 549ms Asset Size Chunks Chunk Names .webpack.res.1504199221679_732531.js 23.2 kB 0 [emitted] […]

从加载器中调用其他Webpack加载器

我正在写一个帕格依赖加载器。 基本上它只会输出一个相同的帕格文件,除了require()调用将被replace为他们需要的文件的path。 因此,显然,我需要走这条路,把它交给Webpack加载器链,这样就可以用适当的方式处理它,例如使用file-loader将图像文件复制到适当的位置。 一切工作除了这部分。 我无法弄清楚如何将path传递给Webpack加载。 为了清楚起见,我想要在Webpack条目文件中require()一个文件时发生同样的事情 – Webpack应该采取path,在可能的加载器列表中运行它,然后进行适当的处​​理。 我已经尝试使用require()调用,我试过this.resolve()和this.loadModule()但没有工作。 由于this.resolve()接受上下文作为它的第一个参数,所以我仔细地给了它适当的my /src文件夹的上下文。 该图像在/src/images/image.jpeg ,但它实际上给出了一个错误,它不能解决这个path,即使它是正确的,所以我不知道我在做什么错误或如何做到这一点工作。