Question

webpack v1

vagrant + virtualbox

我关注 webpack.config.js ：

'use strict';
var _configs = require(__dirname + '/config/build');
var _load = function(env) {
return _configs && _configs(env, __dirname);
};
module.exports = _load(process.env);

配置/ build.js：

'use strict';
var _ = require('lodash');
var _configs = {
desktop: require('./desktop.js'),
};
module.exports = function(_env, _path) {
var config;
var opt = {
debug: true,
devtool: 'source-map',
watch: true
};
return _.merge(opt, _configs'desktop');

如果我更改项目中的文件，则不会更新新数据。我打开浏览器都一样。只有再次重新运行webpack才会更新。对于服务器，我使用节点http-server。

packege.json

{
  "name": "name",
  "version": "1.0.0",
  "description": "description",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "npm i && npm run build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git@github.com:name.git"
  },
  "author": "name",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/name/name/issues"
  },
  "homepage": "https://github.com/name/name#readme",
  "dependencies": {
    "autoprefixer-loader": "3.2.0",
    "axios": "^0.15.3",
    "babel-core": "^6.16.0",
    "babel-eslint": "^6.1.2",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-async-to-generator": "^6.5.0",
    "babel-polyfill": "^6.5.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-0": "^6.0.15",
    "css-loader": "0.22.0",
    "eslint": "^3.17.1",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "^0.11.1",
    "imports-loader": "^0.7.1",
    "lodash": "^4.16.2",
    "lwip": "0.0.9",
    "moment": "^2.16.0",
    "node-sass": "3.4.1",
    "path": "0.12.7",
    "png-sprite-webpack": "git+https://github.com/alexandershved/png-sprite-webpack.git#1.0.2",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-router": "^2.8.1",
    "rename": "1.0.3",
    "sass-loader": "3.1.1",
    "swiper": "^3.4.2",
    "webpack": "1.12.2",
    "webpack-assets-manifest": "0.1.2"
  }
}

如何让webpack自动重建所有更改？

Answer 1

您需要安装：webpack-dev-server。 NPM就像这样：npm install webpack-dev-server --save

尝试将其添加到package.json：

中

"scripts": {
  "build": "webpack --progress --watch --colors",
  "serve": "webpack-dev-server --progress --colors"
},

然后，当您运行npm run serve时，您在项目中所做的更改将立即显示在浏览器中。与命令npm run build一样（即编译项目）

Answer 2

给 Linux 用户的提示：确保您有足够的观察者 https://webpack.js.org/configuration/watch/#not-enough-watchers

Webpack不希望自动重建项目中的所有更改

2 个答案: