webpack编译
❶ 为什么我电脑重启后，webpack都编译不了了
之前好的现在不好了, 如果配置没有改过, 那么可能是文件被锁死了, 重启一下电脑试试.
另外, --watch和--watch-poll参数都是监听文件改动并自动重新编译, 前者监听文件系统的事件. 后者是定时检查文件有无变化(默认每隔1秒), 一般用于虚拟机访问宿主机的文件, 因为虚拟机无法收到宿主机的文件系统事件.
但自动编译并不会触发浏览器重新加载, 需要配合Hot Mole Replacement功能. 最简单的办法是使用webpack-dev-server --hot启动开发环境server. 如果要通过API的方式启动server, 那么就要进入Hard模式..
❷ webpack 怎么直接实时编译输出文件
新建一个server服务用他来启动监听webpack.config.js
用node server.js启动服务
var webpack = require('webpack');
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpackDevServer = require('webpack-dev-server');
var config = require("./webpack.config.js");
config.entry.index.unshift('webpack/hot/dev-server');
config.entry.index.unshift('webpack-dev-server/client?http://localhost:8080');
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {
historyApiFallback: true,
hot: true,
inline: true,
stats: 'errors-only',
host: "localhost",
port: "8080",
});
server.listen(8080);
❸ webpack编译过程中，如何显示编译中的错误信息
webpack 编译出错了自然会显示出错信息的，不需要其他操作。
可以加上--display-error-details来看更详细的错误日志
❹ webpack+vue怎么编译全部改动的文件
p@ build /Users/raywill/code/vue/shop
> cross-env NODE_ENV=proction webpack --progress --hide-moles
Hash: d902d9dc5e1698eaa9ea
Version: webpack 1.12.14
Time: 6584ms
Asset Size Chunks Chunk Names
build.js 80.7 kB 0 [emitted] main
build.js.map 690 kB 0 [emitted] main 12345678910111234567891011
通过引入组件的方式
❺ webpack怎么自动编译reactjs
使用webpack编译打包react是非常便捷的。这也是人们常用的一种方式。但是在使用过程中，一定要注意一个细节，那就是webpack和babel-loader的安装位置。
react安装
当然，使用react必须先安装react和react-dom，其安装方式很简单（前提是我们必须安装有npm）。
# npm install react react-dom –save
react安装就这样简单，其实react和react-dom就是相当于js类库。但是我们需要解析器来解析react的语法。
react解析器babel安装
babel安装的位置是我们这篇文章的目的。babel有两种安装的位置：一种是全局安装，一种是本地安装——也就是安装在项目目录下的node_moles下。
# npm install babel-core babel-loader babel-preset-react –save-dev
//本地安装
#npm install babel-core babel-loader babel-preset-react –g
//全局安装
一般情况下我们选择本地安装，这样便于管理。
打包工具webpack的安装
同样，webpack的安装位置也是这篇文章描述的所要注意的点。当然，它也有两种安装的位置：全局安装和本地安装。
# npm install webpack –save-dev
//本地安装
# npm install webpack –g
//全局安装
如果选择本地安装，那么在使用的时候较麻烦一些，我们需要在命令前加上路径。所以一般情况下都是全局安装，这样就可以在任意位置直接使用。
这里我们选择全局安装。这样才能出现我们将要说的问题。
webpack配置文件编写
安装完webpack以后，下面来编写webpack配置文件webpack.config.js。这里我不写全部，只写加载loader部分。
代码一
mole:{
loaders: [
{
test: /\.js$/,
loader: 'babel',
query:{
presets:['react']
}
}
]
}
编译过程中出现的错误
好了，到了关键的地方了。现在我们整个系统的配置是这样的：babel安装到本地，webpack安装到全局位置，webpack配置文件如代码一所示。
接下来我们就要编译打包我们的项目。
# webpack
执行该命令以后，你会发现出现如下的错误：
ERROR in (webpack)/~/node-libs-browser/~/process/browser.js
Mole build failed: Error: Couldn't find preset "react" relative to
directory
"/node/lib/node_moles/webpack/node_moles/node-libs-browser/node_moles/process"
……
这也就是说找不到babel-preset-react。
好了，说了这么多终于在这里引出了我们将要讨论的问题（这里大家不要嫌我啰嗦，为什么出现这种问题，其原因总要弄清楚。什么样的配置会出现这种问题，了解以后才容易上手解决）。
解决问题的方式
出现上述问题以后，我们有这样三种方式可以解决。
方式一
要解决这个问题很简单。我们知道，出现这个问题是因为bable和webpack安装的位置不同，所以找不到babel-preset-react。因为在配置文件中有这样一段代码。
query:{
presets:['react']
}
好了，既然知道是安装位置不同，那我们可以将babel安装在全局位置，这样这个问题不就解决了吗。
#npm remove babel-core babel-loader babel-preset-react –save-dev
//首先移除原先安装的babel
#npm install babel-core babel-loader babel-preset-react –g
//全局安装
没错，问题解决了。但是我们不推荐使用这种方式。因为这样不便于管理，所以还是使用其他的方式。
方式二
此种方式和方式一大同小异。方式一是改变babel的安装位置，而这里是改变webpack的安装位置。原先webpack是安装到全局位置的，所以找不到安装到本地项目目录下的babel-preset-react。因此我们可以改变webpack的位置。
# npm remove webpack –g
//移除原先的webpack
# npm install webpack –save-dev
//将webpack安装到本地位置——也就是项目目录下的node_moles中
# ln –s /项目根目录/node_moles/webpack/bin/webpack.js /usr/bin/webpack
//为了使用webpack方便，在这里我们在/usr/bin目录下建立软连接（也就是快捷方式）
//这样我们就可以在任意位置直接使用webpack命令了。
此时我们已经改变了webpack的安装位置。现在二者同在项目目录下安装。所以可以正确编译了。
此种方式较方式一，我个人比较推荐这种方式，这样比较方便管理。但是，这种方式也不是没有弊端。如果我们有多个项目，那我们就需要在每个项目下都安装webpack，那岂不是很麻烦。所以这种方式也不是很好。
方式三
该方式应该说是最值得推荐的，因为不需要改变webpack和babel的安装位置。webpack还是在全局位置，babel还是在本地项目位置下。我们需要做的就是修改webpack的配置文件，在代码一的基础上添加一句代码。
代码二
mole:{
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude:/node_moles/,
query:{
presets:['react']
}
}
]
}
❻ webpack 怎么编译es6
说得通俗点，就相当一个编译器，把你写的jquery代码转换成js代码，然后让浏览器运行。就象php代码或者jsp代码，浏览器直接运行不了，得通过编译器来解析，生成纯html代码让浏览器运行。所以如果不引用就用不了jquery代码
❼ 前端构建工具webpack有什么缺陷
配置多入口时，没有glob的方式，需要额外处理。
目录结构复杂时，file-loder里面的path功能太弱，很多时候无法自定义构建后的目录结构，只能放在一个目录下。
源码比较复杂，遇到问题看源码，要花很长时间。
如果没有 babel， webpack 对 ES2015+ 的语法是不接受的，会提示用指定 loader。这意味着，在支持部分 ES2015 语法的 firefox 与 chrome 浏览器中能直接跑的代码，无法用 webpack 编译。
❽ webpack 怎么直接实时编译输出文件
使用webpack编译打包react是非常便捷的。这也是人们常用的一种方式。但是在使用过程中，一定要注意一个细节，那就是webpack和babel-loader的安装位置。react安装当然，使用react必须先安装react和react-dom，其安装方式很简单（前提是我们必须安装有npm）。#npminstallreactreact-dom–savereact安装就这样简单，其实react和react-dom就是相当于js类库。但是我们需要解析器来解析react的语法。react解析器babel安装babel安装的位置是我们这篇文章的目的。babel有两种安装的位置：一种是全局安装，一种是本地安装——也就是安装在项目目录下的node_moles下。#npminstallbabel-corebabel-loaderbabel-preset-react–save-dev//本地安装#npminstallbabel-corebabel-loaderbabel-preset-react–g//全局安装一般情况下我们选择本地安装，这样便于管理。打包工具webpack的安装同样，webpack的安装位置也是这篇文章描述的所要注意的点。当然，它也有两种安装的位置：全局安装和本地安装。#npminstallwebpack–save-dev//本地安装#npminstallwebpack–g//全局安装如果选择本地安装，那么在使用的时候较麻烦一些，我们需要在命令前加上路径。所以一般情况下都是全局安装，这样就可以在任意位置直接使用。这里我们选择全局安装。这样才能出现我们将要说的问题。webpack配置文件编写安装完webpack以后，下面来编写webpack配置文件webpack.config.js。这里我不写全部，只写加载loader部分。代码一mole:{loaders:[{test:/\.js$/,loader:'babel',query:{presets:['react']}}]}编译过程中出现的错误好了，到了关键的地方了。现在我们整个系统的配置是这样的：babel安装到本地，webpack安装到全局位置，webpack配置文件如代码一所示。接下来我们就要编译打包我们的项目。#webpack执行该命令以后，你会发现出现如下的错误：ERRORin(webpack)/~/node-libs-browser/~/process/browser.jsMolebuildfailed:Error:Couldn'tfindpreset"react"relativetodirectory"/node/lib/node_moles/webpack/node_moles/node-libs-browser/node_moles/process"……这也就是说找不到babel-preset-react。好了，说了这么多终于在这里引出了我们将要讨论的问题（这里大家不要嫌我啰嗦，为什么出现这种问题，其原因总要弄清楚。什么样的配置会出现这种问题，了解以后才容易上手解决）。解决问题的方式出现上述问题以后，我们有这样三种方式可以解决。方式一要解决这个问题很简单。我们知道，出现这个问题是因为bable和webpack安装的位置不同，所以找不到babel-preset-react。因为在配置文件中有这样一段代码。query:{presets:['react']}好了，既然知道是安装位置不同，那我们可以将babel安装在全局位置，这样这个问题不就解决了吗。#npmremovebabel-corebabel-loaderbabel-preset-react–save-dev//首先移除原先安装的babel#npminstallbabel-corebabel-loaderbabel-preset-react–g//全局安装没错，问题解决了。但是我们不推荐使用这种方式。因为这样不便于管理，所以还是使用其他的方式。方式二此种方式和方式一大同小异。方式一是改变babel的安装位置，而这里是改变webpack的安装位置。原先webpack是安装到全局位置的，所以找不到安装到本地项目目录下的babel-preset-react。因此我们可以改变webpack的位置。#npmremovewebpack–g//移除原先的webpack#npminstallwebpack–save-dev//将webpack安装到本地位置——也就是项目目录下的node_moles中#ln–s/项目根目录/node_moles/webpack/bin/webpack.js/usr/bin/webpack//为了使用webpack方便，在这里我们在/usr/bin目录下建立软连接（也就是快捷方式）//这样我们就可以在任意位置直接使用webpack命令了。此时我们已经改变了webpack的安装位置。现在二者同在项目目录下安装。所以可以正确编译了。此种方式较方式一，我个人比较推荐这种方式，这样比较方便管理。但是，这种方式也不是没有弊端。如果我们有多个项目，那我们就需要在每个项目下都安装webpack，那岂不是很麻烦。所以这种方式也不是很好。方式三该方式应该说是最值得推荐的，因为不需要改变webpack和babel的安装位置。webpack还是在全局位置，babel还是在本地项目位置下。我们需要做的就是修改webpack的配置文件，在代码一的基础上添加一句代码。代码二mole:{loaders:[{test:/\.js$/,loader:'babel',exclude:/node_moles/,query:{presets:['react']}}]}