Tag: webpack

Webpack外部不可caching: 我正在使用webpack捆绑基于Express.js框架的node.js Web服务器。 Webpack构build工作正常，但最终它给了我两个红色的消息： [1]外部“express”42字节{0} [不可caching] [2]外部“path”42个字节{0} [不可caching] 这是什么意思，我应该修复它？如果是，那么如何解决？我的webpackconfiguration在这里： var server = { devtool: 'source-map', entry: './src/server.ts', target: 'node', // Config for our build files output: { path: root('dist/server'), filename: '[name].bundle.js', sourceMapFilename: '[name].map', chunkFilename: '[id].chunk.js' }, externals: nodeModules, module: { preLoaders: [ // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ root('node_modules') ] }, // […]

webpack-dev-server不会监视所创build的新文件: 我想webpack检测新创build的文件的新变化。我完整的webpack.config.js文件 module.exports = { entry: './src/client/js/index.js', output: { path: 'public', filename: 'bundle.js', publicPath: '/' }, resolve: { extensions: ['', '.js', '.jsx'] }, plugins: process.env.NODE_ENV === 'production' ? [ new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurrenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin() ] : [], module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }, { test: /\.scss$/, loaders: ['style', […]

Webpack html插件不会生成html: 我正在使用webpack html插件从graphiql.ejs生成html页面，但是当我运行npm start时，它不会生成html页面 webpack.config.js var HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { plugins: [ new HtmlWebpackPlugin({ filename: "public/graphql/index.html", // Write the file to <public-path>/graphql/index.html inject: false, // Do not inject any of your project assets into the template GRAPHQL_VERSION: packageJSON.dependencies.graphql.replace(/[^0-9.]/g, ""), // Get the graphql version from my package.json template: "graphiql.ejs" // path to template }) […]

Webpack不能将ES6转换成ES5: 我对Webpack很陌生。我认为我做错了。我想使用babel将ES6函数转换为ES5函数。所以我做了一些研究，发现了babel-loader。但是，我不知道我在做什么。我运行npm install babel-loader –save-dev，它被添加到我的package.json中 // package.json { "name": "kanban", "version": "1.0.0", "description": "kanban", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.3.21", "babel-loader": "^6.2.0", "html-webpack-plugin": "^1.7.0", "json-loader": "^0.5.4", "webpack": "^1.12.9" } } // webpack.config.js var path = […]

节点进程对象可用于浏览器客户端代码: 我想了解webpack如何使用DefinePlugin。我有： new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development'), }), 和一个function： export const foo = () => { console.log(process) console.log(process.env.NODE_ENV) } window.foo = foo 当我打印foo时，我在浏览器控制台中看到以下内容： ƒ foo() { console.log(process); console.log("development"); } 当webpack编译input文件时，好像variables“development”被注入了。同时webpack也将过程对象注入到JavaScript代码中，当foo被调用时，浏览器打印出过程对象： {title: "browser", browser: true, env: {…}, argv: Array(0), nextTick: ƒ, …} 我的问题是，怎样才能使浏览器可以使用作为Node概念的进程对象？其实如果我这样做： window.process = process 我可以在浏览器控制台中使用process.nextTick！我以为nextTick函数是一个特定于Node的实现！有人可以解释吗？谢谢！

使用React和Webpack添加Favicon: 我正在尝试添加一个favicon到我使用webpack的React-based网站。添加一个favicon是一个完全的噩梦，我已经尝试了许多解决scheme无济于事。推荐给我的最新解决scheme叫做“favicons-webpack-plugin”，可以在这里find： https ： //github.com/jantimon/favicons-webpack-plugin 。如果有人能告诉我我做错了什么，你的帮助将不胜感激。运行“npm run start”时出现以下错误这是我的目录结构：这是我的webpack.config.js文件： const path = require('path'); const merge = require('webpack-merge'); const webpack = require('webpack'); const NpmInstallPlugin = require('npm-install-webpack-plugin'); const TARGET = process.env.npm_lifecycle_event; const FaviconsWebpackPlugin = require('favicons-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanPlugin = require('clean-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); var favicons = require('favicons'), source = […]

Configuration.resolve有一个未知的属性'root': 我得到以下错误：无效的configuration对象。 Webpack已经使用与API模式不匹配的configuration对象进行了初始化。 – configuration.resolve有一个未知的属性'root'。这些属性是有效的：object {alias？，aliasFields ?, cachePredicate？，descriptionFiles？，enforceExtension ?, enforceModuleExtension ?, extensions ?, fileSystem ?, mainFields ?, mainFiles？，moduleExtensions？，modules ?, plugins？，resolver？，symlinks ？，unsafeCache ?,使用SyncFileSystemCalls？ } 我使用webpack 2.3.2 。我的webpack.config.js看起来像这样： module.exports= { entry:'./public/app.jsx', output: { path: __dirname, filename:'./public/bundle.js' }, resolve: { root: __dirname, alias:{ Mod1: 'public/components/mod1.jsx', Mod2:'public/components/mod2.jsx', Mod3: 'public/components/mod3.jsx' }, extensions: ['*','.js','.jsx'] }, module :{ loaders:[{ loader […]

使用webpack创buildnpm包: 我正在创build一个npm软件包，并使用webpack的加载器，如babel，eslint等。但是，我假设最终编译版本的软件包应该只包含一个模块，没有webpackBootstrap 。我目前的软件包，webpackconfiguration和源。我把它剥下来，让它“工作”。我采取的步骤检查它是否工作： npm install npm run build npm install -g . node var test = require('test-package'); 造成这个错误： Error: Cannot find module 'test-package' at Function.Module._resolveFilename (module.js:337:15) at Function.Module._load (module.js:287:25) at Module.require (module.js:366:17) at require (module.js:385:17) at repl:1:12 at REPLServer.defaultEval (repl.js:248:27) at bound (domain.js:280:14) at REPLServer.runBound [as eval] (domain.js:293:12) at REPLServer.<anonymous> (repl.js:412:12) at […]

React，babel，webpack不parsingjsx代码: webpack.config.js module.exports = { context: __dirname + "/app", entry: { javascript: "./app.js", html: "./index.html", }, resolve: { extensions: ['', '.js', '.jsx'] }, output: { filename: "app.js", path: __dirname + "/dist", }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader", }, { test: /\.html$/, loader: "file?name=[name].[ext]", }, ], }, } 的package.json { "name": […]