Tag: webpack

如何在Atom中显示整个项目的所有eslint警告？: 目前我的客户端项目是由webpack构build的。 Linting项目是构build过程的一部分。项目中的所有lint警告/错误都显示在控制台中。当我在Atom中打开文件时，会显示该文件中的警告。但是只能显示所有打开的文件的警告。我想在整个项目中看到所有的警告，所以我可以点击它们并迅速解决。我想知道在Atom中是否有这样的解决scheme。有什么build议么？我正在使用以下Atom包：棉绒，版本：1.11.18 linter-eslint ，版本：8.0.0 和下面的npm包： eslint ，版本3.12.2 谢谢！

dotenv-webpack是否将.env的所有环境variables公开给前端？: 我正在构build一个应用程序，其中有一些API的公钥和其他API的私钥。我想将它们全部存储在我的单个.env文件中，并使用dotenv将私钥提供给我的服务器，并将dotenv-webpack提供给我的公共前端javascript。将使用此包使我的私人密钥在我的JavaScript可用或将只采取它所需要的？例： # .env file public_key="12345" private_key="45678" 这个需要在前端访问 // javascript file on front end var publicKey = process.env.public_key 但我想保留这个隐藏的 // javascript file in node.js var privateKey = process.env.private_key 我正在考虑使用这个包： https ： //www.npmjs.com/package/dotenv-webpack

不再能够在Angular 4.2.3中导入BrowserAnimationsModule: 我刚刚升级到了Angular 4.2.3，现在在我的AppModule文件的下面一行出现错误： import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; 错误是： ./~/@angular/platform-browser/@angular/platform-browser/animations.es5.js 47:2-18 "export 'AnimationBuilder' was not found in '@angular/animations' ./~/@angular/platform-browser/@angular/platform-browser/animations.es5.js 78:2-18 "export 'AnimationFactory' was not found in '@angular/animations' ./~/@angular/platform-browser/@angular/platform-browser/animations.es5.js 612:15-31 "export 'AnimationBuilder' was not found in '@angular/animations' ./~/@angular/animations/@angular/animations/browser.es5.js 39:35-45 "export 'ɵPRE_STYLE' was not found in '@angular/animations' ./~/@angular/animations/@angular/animations/browser.es5.js 2275:29-39 "export 'ɵPRE_STYLE' was not found in '@angular/animations' ./~/@angular/animations/@angular/animations/browser.es5.js […]

与webpack的Paper.js: 我正在使用react-starter-kit使用webpack的paper.js。只是为了参考，我不得不安装json-loader和node-loader ，还必须添加节点到webpackconfiguration，以摆脱这样的构build错误 ERROR in ./~/paper/dist/paper-node.js Module not found: Error: Cannot resolve module 'fs' in /home/bojan/www/react/MyApp/node_modules/paper/dist @ ./~/paper/dist/paper-node.js 4808:3-16 10779:10-23 12253:10-23 这是我的webpack.config.js看起来像 var config = { … resolve: { extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json', '.node'] }, module: { loaders: [ { test: /\.json$/, loader: "json-loader" }, { test: /\.node$/, loader: "node-loader" }, … […]

编写TypeScript并发布浏览器和节点的库: 我有一个在Node.js和浏览器中使用的内部库。它有许多文件，连接一个Grunt任务和不同的序言，一个用于浏览器，一个用于Node：浏览器： // dependent 3rd-party libs like Mustache are already global window.myLib = { /*just a namespace object filled with stuff later*/ } // then comes the plain javascript which just adds elements to myLib. // This part is identical to that used in Node // example: myLib.renderPartDetail = function (…) {…}; 节点： var […]

包含package.json文件失败时使用webpack: 我正在尝试使用WebPack为使用commonJS模块的基于同构的JS代码创build浏览器的包。为了暴露package.json中的版本，我在我的index.js中执行以下操作： var pjson = require("../package.json"); module.exports = { version: pjson.version }; 但是，WebPack默认将package.json文件视为JavaScript，这会导致parsing器错误，因为它实际上是JSON： package.json Line 2: Unexpected token : 我读过JSON文件， json-loader插件是必需的，模块path必须调整为json!../package.json 。虽然这实际上适用于WebPack，但它会在本机运行Node.js时破坏代码。那么引用package.json （或任何其他JSON文件）的正确方法是什么，以便WebPack可以创build一个浏览器包，而不是用任何WebPack模块path污染代码？

如何使用羽毛/快递使用webpack-dev-middleware？: 我试图从reactjs前端启动一个feathersjs应用程序。使用webpack-dev-middleware和webpack-hot-middleware ，我应该能够在开发过程中简单地扩展羽毛应用和所有这些webpack的东西。唯一的问题是，当我从webpack中获取js文件时，总是会得到一个羽毛404页面。当然，这是我的目录结构： /feathers/public/index.html /feathers/src/app.js /react/src/index.js /react/webpack.config.js /react/develop.js /feathers/src/app.js是默认的羽毛应用程序，从公用文件夹提供静态文件。 .use('/', serveStatic( app.get('public') )) 在/react/develop.js ，我需要羽毛应用程序并使用webpack中间件进行扩展。 const app = require('../feathers/src/app'); const config = require('./webpack.config'); const path = require('path'); const webpack = require('webpack'); var compiler = webpack(config); app.use(require('webpack-dev-middleware')(compiler, { publicPath: '/', stats: {colors: true}, })); app.use(require('webpack-hot-middleware')(compiler)); const port = app.get('port'); const server = app.listen(port); server.on('listening', […]

npm run dev命令不适用于vuejs的hackernews示例: 我试图从vuejs的github 版本库运行vue-hackernews-2.0例子在安装部分，它解释了如何安装该项目： # install dependencies npm install # or yarn # serve in dev mode, with hot reload at localhost:8080 npm run dev # build for production npm run build # serve in production mode npm start 我做了npm安装。在server.js中将端口更改为8888后，我在命令行上键入“npm run dev”。 > vue-hackernews-2.0@ dev D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master > node server server started at localhost:8888 DONE Compiled […]

对各种webpack匀场方法的困惑: 我对webpack允许暴露一个在npm上没有的variables或将其放入包中的各种方法有点困惑。我能够通过使用暴露谷歌可视化图表脚本的全球google变种 resolve: { extensions: ['.js', '.json'], alias: { 'google': path.resolve(__dirname, 'vendor', 'google.js') } } 结合 plugins: [ new webpack.ProvidePlugin({ 'google': 'google' }) ] 然而，看看webpack文档有一些其他方法来填充，看起来他们可能会做类似的事情。有imports-loader和exports-loader ，和script-loader 。我知道我已经链接到了文档，但是我仍然发现他们的描述应该使用这四个不太清楚。也看这个例子，这是否require不分配给一个variables？它意味着去哪里？哪里是关于这个语法正在发生的文档？ require("imports?$=jquery!./file.js") 有人能提供一些什么时候应该使用的例子吗？

在Webpack中，如何根据命令行参数启用插件？: 以下是我的webpack.config.js的插件属性： plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), new webpack.optimize.OccurenceOrderPlugin(), new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('production'), } }), new webpack.optimize.UglifyJsPlugin({ compressor: { warnings: false } }), new CompressionPlugin({ asset: '{file}', algorithm: 'gzip', regExp: /\.js$|\.html$/, }) ], 有时我想要禁用CompressionPlugin而有时我想启用它。但是，创build两个webpackconfiguration文件看起来很笨拙。我想知道是否有办法通过使用命令行参数dynamic地启用/禁用插件？例如，如果我可以使用webpack –disable-compression-plugin来禁用CompressionPlugin ，那将是非常好的。有没有人有任何想法呢？