Articles of webpack

向esLint添加例外

我有我的webpackconfiguration中的两个variables是必需的,但抛出linting错误。 有没有办法增加一个特定variables的例外? 我想忽略path和persistentPlugins 当前的.eslintrc文件如下所示: { "parser": "babel-eslint", "env": { "es6": true, "browser": true, "node": true }, "globals": { "React": false, "react": false, }, "plugins": [ "react" ], "extends": [ "eslint:recommended", "plugin:react/recommended" ], "rules": { "no-console": 0, "no-underscore-dangle": 1, "quotes": [2, "single"], "react/no-danger": "off", } }

如何为npm命令定义脚本?

我正在使用npm + webpack来pipe理反应的Web应用程序。 我想为npm定义一些命令来运行一些webpack命令。 下面是我在package.json文件中定义的两个命令脚本。 "scripts": { "start": "webpack-dev-server –host 0.0.0.0", "build": "NODE_ENV=production webpack –config ./webpack.config.js –progress –profile –colors" }, 正如你所看到的,有两个命令“开始”和“build立”。 当我运行npm start ,它将运行webpack-dev-server –host 0.0.0.0来启动一个web服务器。 但是当我运行npm build ,它不运行configuration的命令,只是简单地返回没有任何输出。 我徘徊如何定义一个脚本命令为npm使用。 下面是我的整个package.json文件: { "name": "demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server –host 0.0.0.0", "build": "NODE_ENV=production webpack –config ./webpack.config.js –progress –profile –colors" }, […]

在我们的库中,如何告诉webpack跳过依赖关系?

我们有一个传统的客户端库。 它使用HTTP请求(或其他一些依赖库)来进行REST调用。 使用库时,用户将使用特定的请求提供程序进行初始化,然后closures它们。 我们在我们的例子中使用webpack来利用我们的库。 现在将其扩展为使用节点获取,所以如果有人想从支持的nodejs使用它。 对于使用webpack的人来说,webpack现在试图打包node-fetch,并且require调用在浏览器中失败。 我们可以通过设置外部来解决这个问题 "externals" : { "node-fetch": "{}" } 有没有一种方法来定义我们的库,以便如果消费者正在使用webpack target:web,它会跳过需要检查节点获取? 同样,如果消费者正在使用webpack target:nodejs,则需要包含节点获取组件。 有问题的项目是https://github.com/OfficeDev/PnP-JS-Core

NPM Angular ERR! peerInvalid / peerDependencies要求

在这个package.json上运行npm install { "author": ", Inc.", "name": "-angular2-template", "version": "0.2.0", "description": "Angular 2 Project Template. Webpack, ES6, Sass, Karma.", "bugs": { "url": "https://dev..net//-angular-template/issues" }, "repository": { "type": "git", "url": "git@dev..net:/-angular-template.git" }, "scripts": { "start": "concurrently -k -r \"npm run webpack:w\" \"npm run sass:w\" \"npm run lite\"", "build": "NODE_ENV='production' npm run webpack:b && npm run sass:b", […]

从Webpack DLL构build中排除模块

我有一个Webpack构build一个通用的JavaScript应用程序。 我正在使用DLL插件预先构build我的所有node_modules。 我添加了一个导致DLL生成错误的库(见下文)。 我可以添加一个JSON加载器来解决这个问题。 但是我根本不需要React代码中的lib。 我将它添加到了我的排除列表中,但仍然出现错误。 这是错误: Building the Webpack DLL… Hash: a69a927bfa72ddef88d5 Version: webpack 2.1.0-beta.15 Time: 7152ms Asset Size Chunks Chunk Names reactBoilerplateDeps.dll.js 5.58 MB 0 [emitted] reactBoilerplateDeps chunk {0} reactBoilerplateDeps.dll.js (reactBoilerplateDeps) 5.07 MB [rendered] [1135] dll reactBoilerplateDeps 12 bytes {0} [built] + 1137 hidden modules ERROR in ./~/constants-browserify/constants.json Module parse failed: /Users/steve/Projects/elucidate/node_modules/constants-browserify/constants.json Unexpected […]

Webpackparsing扩展名“Module not found”

警告:我对webpack很新,​​请温和 好吧,我正在尝试设置webpack,并且我使用es2015正常工作,并使用webpack导入。 我遇到了一个问题,现在我试图添加扩展来resolve所以我不必声明文件扩展名,但它总是说,它无法find文件或模块。 任何想法,为什么这可能是? 这是我的index.jsx和我的webpack.config.js // index.jsx import * as React from 'react' import * as ReactDOM from 'react-dom' import { Provider } from 'react-redux' import App from './components/App' import configureStore from './store/configureStore.js' const store = configureStore() ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('app') ) 这里是webpack.config : // webpack.config var path = require('path') var webpack […]

Webpack CSS加载程序 – 模块未find:错误:无法parsing模块“文件”

尝试使用CSS-Loader时遇到此错误… Module not found: Error: Cannot resolve module 'file' 这是怎么回事?

有没有办法可以改变这里显示的任何文件与webpack部署?

什么来了? (1)短背景。 (2)问题。 (3)细节(简短;文件清单足够长,以显示相关信息)。 (4)再次提问。 简短的背景 :我想用webpack部署我的网站。 webpack正在寻找style-loader和css-loader在错误的目录中,所以我的构build没有完成。 题 有没有办法可以改变这里显示的任何文件与webpack部署? 详情 环境 Windows 10 Home-64,最新版本/东芝Satellite A6 节点v6.2.0 / webpack v1.13.2 相关的文件和目录结构 C:\Dev\example\example.js C:\Dev\example\bluebird.js C:\Dev\example\jquery.js C:\Dev\example\img\image1.jpg C:\Dev\example\img\image2.jpg C:\Dev\example\img\svg1.svg C:\Dev\example\built\package.json C:\Dev\example\built\webpack.config.js C:\Dev\example\built\index1.html C:\Dev\example\built\index2.html C:\Dev\example\built\example.bundle.js C:\Dev\example\built\[hash1].jpg C:\Dev\example\built\[hash2].jpg C:\Dev\example\built\[hash3].svg C:\Dev\node-modules\webpack C:\Dev\node-modules\css-loader C:\Dev\node-modules\file-loader C:\Dev\node-modules\html-loader C:\Dev\node-modules\style-loader C:\Dev\node-modules\uglify-js C:\Dev\node-modules\url-loader C:\开发\例子\build立\的package.json { "name": "example", "version": "0.0.1", "description": "example", "main": "example.bundle.js", "author": "Bald Eagle" […]

使用webpack-manifest-plugin得到错误'Uncaught SyntaxError:Unexpected token <'

我昨天发现了webpack-manifest-plugin,并在本教程开始使用它。 当我在浏览器上打开我的应用程序时,它显示Uncaught SyntaxError: Unexpected token < 。 该应用程序正在加载正确的散列。 错误指向<!DOCTYPE html> 。 以下是我的webpackconfiguration: 'use strict' var webpack = require('webpack'); var path = require('path'); var extractTextWebpackPlugin = require('extract-text-webpack-plugin'); var webpackManifestPlugin = require('webpack-manifest-plugin'); var autoprefixer = require('autoprefixer'); module.exports = { devtool: 'cheap-module-eval-source-map', entry: [ './modules/index.js' ], output: { path: path.join(__dirname, 'public/build'), filename: 'bundle.[hash].js' }, module: { noParse: [ […]

我怎样才能解决`错误:无法find绑定文件.`使用`node-ffi`时?

一些细节: Mac OSX 10.11.6 节点v6.5.0 npm v3.10.3 nvm v0.29.0 我最近build立了一个使用ffi与共享C库交互的npm包。 这个软件包完全可以自己完成(使用babel构build)。 我试图将其整合到一个概念validation应用程序中,并遇到了很多 bindings问题。 我正在使用webpack捆绑我的POC应用程序,这就是我遇到这个问题的地方。 这是我的webpack.config.js : /* eslint-disable */ var webpack = require('webpack'); var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var buildPath = path.resolve(__dirname, 'wp-build/'); module.exports = [ { name: 'frontend', entry: './src/frontend/index.js', output: { path: buildPath, filename: 'frontend.bundle.js', }, module: { loaders: [{ […]