Questions tagged «webpack»

我试图总结我对最流行的JavaScript包管理器，捆绑器和任务运行器的了解。如果我错了，请纠正我： npm＆bower是包裹经理。他们只是下载依赖项，而不知道如何自行构建项目。他们知道什么是调用webpack/ gulp/ grunt获取所有的依赖后。 bower类似于npm，但是构建了一个扁平的依赖树（与npm递归地执行不同）。含义将npm获取每个依赖项的依赖项（可能会获取相同的几次），同时bower希望您手动包含子依赖项。有时，bower和npm分别分别用于前端和后端（因为前端中每个兆字节可能都很重要）。 grunt并且gulp是任务执行者，可以自动化所有可以自动化的内容（例如，编译CSS / Sass，优化图像，制作捆绑包并缩小/翻译）。 gruntvs. gulp（类似于mavenvs. gradle或配置vs.代码）。Grunt基于配置单独的独立任务，每个任务打开/处理/关闭文件。Gulp需要较少的代码量，并且基于Node流，这使其可以构建管道链（无需重新打开同一文件）并使其更快。 webpack（webpack-dev-server）-对我来说，这是一个任务执行程序，它具有对更改进行热重新加载的功能，使您无需理会所有JS / CSS监视程序。 npm// bower插件可以代替任务运行器。它们的能力经常相交，因此如果您需要使用gulp/ gruntover npm+插件，则会有不同的含义。但是任务运行者绝对适合复杂任务（例如“在每个构建中创建捆绑包，从ES6移植到ES5，在所有浏览器模拟器上运行它，制作屏幕截图并通过ftp部署到保管箱”）。 browserify允许为浏览器打包节点模块。browserifyvs node's require实际上是AMD vs CommonJS。 问题： 什么是webpack＆webpack-dev-server？官方文档说这是一个模块捆绑器，但对我来说只是一个任务运行器。有什么不同？ 您将在哪里使用browserify？我们不能对node / ES6导入做同样的事情吗？ 您何时会使用gulp/ gruntover npm+插件？ 当您需要组合使用时，请提供示例

1886 gruntjs  npm  gulp  bower  webpack 

我在应用程序中使用Webpack，在其中创建两个入口点-所有JavaScript文件/代码的bundle.js，以及jQuery和React之类的所有库的vendor.js。为了使用以jQuery为依赖项的插件，我想怎么做？我也想在vendor.js中使用它们吗？如果这些插件具有多个依赖项怎么办？ 目前，我正在尝试在此处使用此jQuery插件-https: //github.com/mbklein/jquery-elastic。Webpack文档中提到了providePlugin和imports-loader。我使用了ProvidePlugin，但是jQuery对象仍然不可用。这是我的webpack.config.js的样子- var webpack = require('webpack'); var bower_dir = __dirname + '/bower_components'; var node_dir = __dirname + '/node_modules'; var lib_dir = __dirname + '/public/js/libs'; var config = { addVendor: function (name, path) { this.resolve.alias[name] = path; this.module.noParse.push(new RegExp(path)); }, plugins: [ new webpack.ProvidePlugin({ $: "jquery", jquery: "jQuery", "window.jQuery": "jquery" …

451 javascript  jquery  amd  webpack 

捆绑Angular（版本2、4、6，...）以在实时Web服务器上进行生产的最佳方法是什么。 请在答案中包括Angular版本，以便在移至更高版本时可以更好地进行跟踪。

353 angular  webpack  systemjs  angular-cli 

我正尝试从Gulp移至Webpack。在Gulp我的任务中，将所有文件和文件夹从/ static /文件夹复制到/ build /文件夹。怎么做Webpack呢？我需要一些插件吗？

330 javascript  webpack 

我是webpack的新手，我需要进行设置以生成Sourcemap。我正在webpack serve从命令行运行，该命令行已成功编译。但是我真的需要sourcemap。这是我的webpack.config.js。 var webpack = require('webpack'); module.exports = { output: { filename: 'main.js', publicPath: '/assets/' }, cache: true, debug: true, devtool: true, entry: [ 'webpack/hot/only-dev-server', './src/components/main.js' ], stats: { colors: true, reasons: true }, resolve: { extensions: ['', '.js', '.jsx'], alias: { 'styles': __dirname + '/src/styles', 'mixins': __dirname + '/src/mixins', …

328 javascript  webpack  build-process  babeljs  source-maps 

我正在尝试将角度应用程序从gulp转换为webpack。在gulp中，我使用gulp-preprocess来替换html页面中的某些变量（例如，数据库名称），具体取决于NODE_ENV。使用webpack达到类似结果的最佳方法是什么？

306 javascript  webpack 

我正在开始一个新的vue.js项目，所以我使用了vue-cli工具来搭建一个新的webpack项目（即vue init webpack）。 在浏览生成的文件时，我注意到文件中的以下导入src/router/index.js： import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' // <- this one is what my qusestion is about Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello } ] }) 我之前没有@在路径中看到at符号（）。我怀疑它允许相对路径（也许吗？），但是我想确保我了解它的真正作用。 我尝试了在线搜索，但是找不到解释（可能是因为搜索“在符号处”或使用文字字符@不能作为搜索条件）。 这@条路径的作用是什么（链接到文档非常好），这是es6吗？一个webpack的东西？vue-loader东西？ 更新 感谢Felix Kling向我指出了另一个关于同一问题的重复的stackoverflow问题/答案。 虽然在其他stackoverflow帖子上的评论不是对该问题的确切答案（在我看来，这不是babel插件），但确实为我指明了正确的方向，以查找问题所在。 …

273 javascript  webpack  ecmascript-6  vue.js 

我正在使用Angular 2+和Angular CLI。 如何在我的项目中添加超棒的字体？

269 angular  webpack  angular-cli 

Webpack文档指出output.publicPath： 在output.path与JavaScript的视图。 您能否详细说明这实际上意味着什么？ 我使用output.path和output.filename来指定Webpack应该在哪里输出结果，但是我不确定要放入什么output.publicPath以及是否需要它。 module.exports = { output: { path: path.resolve("./examples/dist"), filename: "app.js", publicPath: "What should I put here?" } }

250 javascript  webpack 

我读了几 页有关的WebPack热模块的更换。 甚至还有一个示例应用程序是使用它。 我已经阅读了所有这些内容，但仍然不明白。 我该怎么办？ 是否应该仅将其用于开发而非生产中？ 就像LiveReload，但您必须自己管理它吗？ WebpackDevServer是否以某种方式与LiveReload集成？ 假设我想在将CSS和JS模块保存到磁盘时更新它们（一个样式表）和JS模块，而无需重新加载页面并且不使用LiveReload之类的插件。这是热模块更换可以帮助我的吗？我需要做什么工作？HMR已经提供了什么？

245 javascript  module  livereload  webpack 

我有两个问题。 1）CSS加载器和样式加载器是两个webpack加载器。我无法理解两者之间的区别。为什么当它们都完成相同的工作时，我必须使用两个装载机？ 2）在上面的Readme.md文件中提到的.useable.less和.useable.css是什么？

238 webpack  webpack-style-loader 

这是我的 webpack.config.js var webpack = require("webpack"); module.exports = { entry: "./entry.js", devtool: "source-map", output: { path: "./dist", filename: "bundle.min.js" }, plugins: [ new webpack.optimize.UglifyJsPlugin({minimize: true}) ] }; 我正在与 $ webpack 在我的dist文件夹中，我只会 bundle.min.js bundle.min.js.map 我也想看看未压缩的 bundle.js

233 javascript  node.js  webpack 

我正在创建我的第一个Angular应用程序，我将弄清楚模块加载器的作用是什么。为什么我们需要它们？我试图在Google上进行搜索，但我不明白为什么我们需要安装其中之一来运行我们的应用程序？ 仅使用它import从节点模块中加载内容就不够了吗？ 我已经按照本教程（使用SystemJS）进行了学习，它使我可以使用systemjs.config.js文件： /** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function(global) { // map tells the System loader where to look for things var map = { 'app': 'transpiled', // 'dist', '@angular': 'node_modules/@angular', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 'rxjs': 'node_modules/rxjs' }; // packages tells …

222 angular  webpack  systemjs  node-modules 

我试图在我的项目中运行一些ES6代码，但出现意外的令牌导出错误。 export class MyClass { constructor() { console.log("es6"); } }

220 javascript  ecmascript-6  webpack  babel 

如何在webpack.config中使用ES6？像这个仓库 https://github.com/kriasoft/react-starter-kit 可以吗？ 例如： 使用这个 import webpack from 'webpack'; 代替 var webpack = require('webpack'); 这是一种好奇而不是需要。

210 webpack