我在主应用程序中使用npm link
指向submodules packages
。npm link
对我来说很好,我想通过npm link
引用的位置更新后再添加一项功能,请重新加载应用程序,因为submodules packages
中会有一些更新
我正在关注此StackOverflow Question
我已经用node_modules/watchpack/lib/DirectoryWatcher.js
更新了文件followSymlinks: true,
将watchOptions
添加到webpack.dev.babel.js
watchOptions: { ignored: [ /node_modules([\\]+|\/)+(?!cookie)/, /cookie([\\]+|\/)node_modules/ ]},
此后,如果我试图在
cookie
节点模块中进行更改,则Webpack不会重新加载。
这是我的
/** * DEVELOPMENT WEBPACK CONFIGURATION */ const path = require('path'); const fs = require('fs'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CircularDependencyPlugin = require('circular-dependency-plugin'); const logger = require('../../server/logger'); const cheerio = require('cheerio'); const pkg = require(path.resolve(process.cwd(), 'package.json')); const dllPlugin = pkg.dllPlugin; const plugins = [ new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading new webpack.NoErrorsPlugin(), new HtmlWebpackPlugin({ inject: true, // Inject all files that are generated by webpack, e.g. bundle.js templateContent: templateContent(), // eslint-disable-line no-use-before-define }), new CircularDependencyPlugin({ exclude: /a\.js|node_modules/, // exclude node_modules failOnError: false, // show a warning when there is a circular dependency }), ]; module.exports = require('./webpack.base.babel')({ // Add hot reloading in development entry: [ 'eventsource-polyfill', // Necessary for hot reloading with IE 'webpack-hot-middleware/client?reload=true', path.join(process.cwd(), 'app/app.js'), // Start with js/app.js ], watchOptions: { ignored: [ /node_modules([\\]+|\/)+(?!cookie)/, /cookie([\\]+|\/)node_modules/ ] }, // Don't use hashes in dev mode for better performance output: { filename: '[name].js', chunkFilename: '[name].chunk.js', }, // Add development plugins plugins: dependencyHandlers().concat(plugins), // eslint-disable-line no-use-before-define // Tell babel that we want to hot-reload babelQuery: { // require.resolve solves the issue of relative presets when dealing with // locally linked packages. This is an issue with babel and webpack. // See https://github.com/babel/babel-loader/issues/149 and // https://github.com/webpack/webpack/issues/1866 presets: ['babel-preset-react-hmre'].map(require.resolve), }, // Emit a source map for easier debugging devtool: 'cheap-module-eval-source-map', performance: { hints: false, }, }); /** * Select which plugins to use to optimize the bundle's handling of * third party dependencies. * * If there is a dllPlugin key on the project's package.json, the * Webpack DLL Plugin will be used. Otherwise the CommonsChunkPlugin * will be used. * */ function dependencyHandlers() { // Don't do anything during the DLL Build step if (process.env.BUILDING_DLL) { return []; } // If the package.json does not have a dllPlugin property, use the CommonsChunkPlugin if (!dllPlugin) { return [ new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', children: true, minChunks: 2, async: true, }), ]; } const dllPath = path.resolve(process.cwd(), dllPlugin.path || 'node_modules/react-boilerplate-dlls'); /** * If DLLs aren't explicitly defined, we assume all production dependencies listed in package.json * Reminder: You need to exclude any server side dependencies by listing them in dllConfig.exclude */ if (!dllPlugin.dlls) { const manifestPath = path.resolve(dllPath, 'reactBoilerplateDeps.json'); if (!fs.existsSync(manifestPath)) { logger.error('The DLL manifest is missing. Please run `npm run build:dll`'); process.exit(0); } return [ new webpack.DllReferencePlugin({ context: process.cwd(), manifest: require(manifestPath), // eslint-disable-line global-require }), ]; } // If DLLs are explicitly defined, we automatically create a DLLReferencePlugin for each of them. const dllManifests = Object.keys(dllPlugin.dlls).map((name) => path.join(dllPath, `/${name}.json`)); return dllManifests.map((manifestPath) => { if (!fs.existsSync(path)) { if (!fs.existsSync(manifestPath)) { logger.error(`The following Webpack DLL manifest is missing: ${path.basename(manifestPath)}`); logger.error(`Expected to find it in ${dllPath}`); logger.error('Please run: npm run build:dll'); process.exit(0); } } return new webpack.DllReferencePlugin({ context: process.cwd(), manifest: require(manifestPath), // eslint-disable-line global-require }); }); } /** * We dynamically generate the HTML content in development so that the different * DLL Javascript files are loaded in script tags and available to our application. */ function templateContent() { const html = fs.readFileSync( path.resolve(process.cwd(), 'app/index.html') ).toString(); if (!dllPlugin) { return html; } const doc = cheerio(html); const body = doc.find('body'); const dllNames = !dllPlugin.dlls ? ['reactBoilerplateDeps'] : Object.keys(dllPlugin.dlls); dllNames.forEach((dllName) => body.append(`<script data-dll='true' src='/${dllName}.dll.js'></script>`)); return doc.toString(); }
webpack.base.babel
/** * COMMON WEBPACK CONFIGURATION */ const path = require('path'); const webpack = require('webpack'); module.exports = (options) => ({ entry: options.entry, output: Object.assign({ // Compile into js/build.js path: path.resolve(process.cwd(), 'build'), publicPath: '/', }, options.output), // Merge with env dependent settings module: { loaders: [{ test: /\.js$/, // Transform all .js files required somewhere with Babel loader: 'babel-loader', exclude: [/node_modules/, /styles/], query: options.babelQuery, }, { // Do not transform vendor's CSS with CSS-modules // The point is that they remain in global scope. // Since we require these CSS files in our JS or CSS files, // they will be a part of our compilation either way. // So, no need for ExtractTextPlugin here. test: /\.css$/, include: [/node_modules/, /styles/], loaders: ['style-loader', 'css-loader'], }, { test: /\.less$/, include: [/node_modules/, /styles/], loaders: ['style-loader', 'css-loader'], }, { test: /\.(eot|svg|ttf|woff|woff2)$/, include: [/node_modules/, /styles/], loader: 'file-loader', }, { test: /\.(jpg|png|gif|svg)$/, loaders: [ 'file-loader', { loader: 'image-webpack-loader', query: { progressive: true, optimizationLevel: 7, interlaced: false, pngquant: { quality: '65-90', speed: 4, }, }, }, ], }, { test: /\.html$/, loader: 'html-loader', }, { test: /\.json$/, loader: 'json-loader', }, { test: /\.(mp4|webm)$/, loader: 'url-loader', query: { limit: 10000, }, }], }, plugins: options.plugins.concat([ new webpack.ProvidePlugin({ // make fetch available fetch: 'exports-loader?self.fetch!whatwg-fetch', }), // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV` // inside your code for any environment checks; UglifyJS will automatically // drop any unreachable code. new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV), OUR_AUTH_VAR: JSON.stringify(process.env.OUR_AUTH_VAR), }, }), new webpack.NamedModulesPlugin(), new webpack.ContextReplacementPlugin(/\.\/locale$/, null, false, /js$/), // new webpack.IgnorePlugin(/\.\/locale$/), ]), resolve: { modules: ['app', 'node_modules'], extensions: [ '.js', '.jsx', '.react.js', ], mainFields: [ 'browser', 'jsnext:main', 'main', ], alias: { 'react': path.resolve('./node_modules/react') } }, devtool: options.devtool, target: 'web', // Make web variables accessible to webpack, e.g. window performance: options.performance || {}, });
提前感谢
我在主应用程序中使用npm链接指向子模块包。 npm链接对我来说工作正常,我想在通过npm链接放置的引用得到引用后立即添加一项新功能...
如果使用的是JavaScript(而非打字稿),请确保您的\.js$
Webpack规则不排除node_modules
。