我正在使用Angular 2+和Angular CLI.

如何为我的项目添加font-awesome？

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?"   
  } 
}

这是我的 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

我有两个问题.

1)CSS Loader和Style Loader是两个webpack加载器.我无法理解两者之间的区别.当他们做同样的工作时,为什么我必须使用两个装载机？

2)上面的Readme.md文件中提到的.useable.less和.useable.css是什么？

我在安装Bootstrap时遇到了一个奇怪的错误。错误如下。我尝试卸载less-loader并安装less-loader@5.0.0，因为我在网上看到它，但它没有任何作用。我不确定在这一步要做什么。

语法错误：TypeError：this.getOptions 不是函数

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss 4:14-419 14:3-18:5 15:22-427
 @ ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.182:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

我正在创建我的第一个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 the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs': …

我正在开始一个新的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符号().我怀疑它允许相对路径(也许？)但我想确定我理解它真正的作用.

我尝试在网上搜索,但无法找到解释(因为搜索"at sign"或使用文字字符@没有帮助作为搜索条件).

@在这条道路上做了什么(链接到文档会很棒)这是一个es6的事情？一个webpack的东西？一个vue-loader的东西？

UPDATE

感谢Felix Kling指出我关于同一个问题的另一个重复的stackoverflow问题/答案.

虽然对其他stackoverflow帖子的评论不是这个问题的确切答案(在我的情况下它不是一个babel插件)但它确实指出了我找到它的正确方向.

在vue-cli为你创建的脚手架中,基本webpack配置的一部分为.vue文件设置了一个别名:

这有意义,因为它为您提供了来自src文件的相对路径,并且它删除.vue了导入路径末尾(通常需要)的要求.

谢谢您的帮助!

如何在webpack.config中使用ES6？像这个回复 https://github.com/kriasoft/react-starter-kit 吗？

例如:

用这个

import webpack from 'webpack';

代替

var webpack = require('webpack');

这是一种好奇而不是需要.

无论如何,当你使用webpack时,你可以阻止moment.js加载所有语言环境(我只需要英语)吗？我正在查看源代码,如果定义了hasModule,它是用于webpack,那么它总是尝试require()每个语言环境.我很确定这需要拉动请求来修复.但无论如何我们可以使用webpack配置修复此问题.

这是我的webpack配置加载momentjs

resolve: {
            alias: {
                moment: path.join(__dirname, "src/lib/bower/moment/moment.js")
            },
        },

然后我需要它的任何地方我只需要('时刻')这可行,但它添加了大约250kb的不需要的语言文件到我的包.此外,我正在使用bower版本的momentjs和gulp.

此外,如果这不能通过webpack配置修复,这里是一个链接到它加载语言环境的函数https://github.com/moment/moment/blob/develop/moment.js#L760-L772我尝试添加"&& module.exports.loadLocales"到if语句,但是我认为webpack并不能以某种方式工作它只需要我认为它现在使用正则表达式所以我真的不知道你会怎么做去解决它.无论如何,谢谢你的帮助.

我已经阅读了几 页关于Webpack中的热模块替换的内容.
甚至还有一个示例应用程序是使用它.

我已经阅读了所有这些,仍然没有得到这个想法.

我该怎么办？
它应该只用于开发而不是生产吗？
它是否像LiveReload,但你必须自己管理它？
WebpackDevServer是否以某种方式与它集成？

假设我想在将它们保存到磁盘时更新我的​​CSS(一个样式表)和JS模块,而无需重新加载页面而不使用LiveReload等插件.这是热模块更换可以帮助我吗？我需要做什么工作,HMR已经提供了什么？