是否可以使用webpack定义一个全局变量,结果如下:

var myvar = {};

我看到的所有示例都使用外部文件 require("imports?$=jquery!./file.js")

特别是在从webpack v1过渡到v2期间,以编程方式确定安装了哪个webpack版本非常重要,但我似乎找不到合适的API.

我需要帮助将以下代码从webpack 3迁移到4.

new webpack.optimize.CommonsChunkPlugin({
    minChunks: module => module.context && module.context.indexOf("node_modules") !== -1,
    name: "vendor",
    chunks: ["main"]
})

我有两个条目文件,只希望第一个的依赖项包含在供应商块中.第二个条目的依赖关系应该都保留在自己的bundle中.

Webpack3附带ModuleConcatenation插件,当与--display-optimization-bailout标志一起使用时,将为您提供救助的原因.

救助信息并不容易理解,而且很难理解为什么它们发生在特定模块上.

这是我webpack在项目的一个非常简化版本上的命令输出:

> webpack --bail --display-optimization-bailout

Hash: 4a9a55dc2883e82a017e
Version: webpack 3.4.1
Child client:
    Hash: 4a9a55dc2883e82a017e
    Time: 594ms
                                   Asset       Size  Chunks                    Chunk Names
        a.d3ade61d21d5cb8dd426.bundle.js  712 bytes       0  [emitted]         a
    a.d3ade61d21d5cb8dd426.bundle.js.map    6.57 kB       0  [emitted]         a
                           manifest.json  102 bytes          [emitted]         
                              index.html     299 kB          [emitted]  [big]  
       [0] multi ./src/client/bootstrap/ErrorTrap.js 28 bytes {0} [built]
           ModuleConcatenation bailout: Module is not an ECMAScript module
       [1] ./src/client/bootstrap/ErrorTrap.js 199 bytes {0} [built]
           ModuleConcatenation bailout: Module is not an ECMAScript module

我 …

我正在尝试按照此指令https://webpack.js.org/loaders/jshint-loader/ 并收到错误消息:

我的配置文件:

const path = require('path');

    module.exports = {
      entry: {
        app: './index.js'
      },
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
      },

      module: {
        rules: [
          {
            test: /\.js$/, // include .js files
            enforce: "pre", // preload the jshint loader
            exclude: /node_modules/, // exclude any and all files in the node_modules folder
            use: [
              {
                loader: "jshint-loader"
              }
            ]
          }
        ]
      },

      // more options in the optional jshint object
      jshint: {
        // any jshint option http://www.jshint.com/docs/options/
        // …

我正试图找到一种方法来破坏我的模块并使用Babel和Webpack.

如果我从webpack文档(https://webpack.js.org/guides/tree-shaking/)获取示例代码并运行它,那么未使用的模块/函数/其他导出将被标记为未使用的和谐导出,这是预期的结果.在使用-p参数(生产)运行webpack之后,webpack使用UglifyJS删除死的和未使用的代码(到树抖动).

现在,如果我将babel-loader添加到我的webpack配置文件中,我的ES2015模块将被转换,但现在不再标记为未使用的导出.

例如:

math.js

export function square(x) {
  return x * x;
}

export function cube(x) {
  return x * x * x;
}

app.js(我的条目文件)

import {square} from './math.js'

通过webpack运行,没有 babel-loader,该cube函数将被标记为未使用并在编译生产后删除(-p).

通过带有 babel-loader的webpack运行,该cube函数将不会被标记为未使用,并将保留在已编译的包中.

我错过了什么？

编辑

这是一个可以重现这种情况的演示回购

https://github.com/Milanzor/babel-and-treeshaking-question

更新

如果我添加.babelrc:

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "entry",
      "debug": true,
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }]
  ]
}

我得到相同的结果,但如果我添加modules: false到preset-env选项,Babel不会将模块编译为ES5,Webpack会将模块再次标记为未使用.

结论

我需要找到一种方法来告诉Webpack我的模块是用Babel编译的,或者我需要找到一种方法告诉Babel自己扫描未使用的代码.

我要使用： require.context('../images/', true, /\.(png|ico|svg|jpg|gif)$/)

但我收到以下错误：

属性上下文在NodeRequire类型上不存在

所以我有一些供应商文件,我需要从窗口范围运行(它是一堆窗口范围的功能)加上我有一些polyfill,我想捆绑到供应商包中.

所以我尝试过这样的事情:

new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'js/vendor.min.js',
    minChunks: Infinity,
})

entry: {
    'vendor' : ['./vendor.js', './vendor2.js', './polyfills.js']
}

现在,当我运行我的webpack构建时,它会生成我的供应商包,但它全部包含在webpackJsonP包装中,因此这些函数在窗口范围内是不可访问的.

我也看过使用类似ProvidePlugin的东西,但我根本无法完成这项工作,因为我没有像jQuery这样的定义名称,其中所有内容都被映射下来.

这在webpack中甚至可能吗？

谢谢

从Webpack@3.0.0开始,我们就拥有了这个支持命名块文件的强大功能:

import(
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy-once" */
  'module'
);

但是,我正处于这样的情况下,我有40次这样的进口,改变它们中的每一种都是一种麻烦.

有没有办法为所有块定义webpackChunkName和webpackMode全局？

我想象这样的事情webpack.config.js:

output: {
    filename:      'js/[name].js',
    chunkFilename: 'js/[filename].js' // so that import('module') creates module.js
    chunkMode:     'lazy-once' // so I can override default `lazy` option once and for all
}

因为node-sass有一个很大的安装问题和兼容问题，所以我不想使用node-sass，更喜欢在我的项目中使用dart sass。但是当我像这样使用 sass-loader 时：

"sass-loader": "7.0.0",

表明：

  ERROR in ./node_modules/sass-loader/lib/loader.js!./node_modules/css-loader?sourceMap!./node_modules/sass-loader/lib/loader.js?sourceMap!./src/public/widget/style.scss
    Module build failed: Error: `sass-loader` requires `node-sass` >=4. Please install a compatible version.
        at Object.sassLoader (/Users/xiaoqiangjiang/source/reddwarf/frontend/crx-selection-translate/node_modules/sass-loader/lib/loader.js:31:19)
     @ ./node_modules/style-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/css-loader?sourceMap!./node_modules/sass-loader/lib/loader.js?sourceMap!./src/public/widget/style.scss 4:14-197

我应该怎么做才能让 sass-loader 忽略节点 sass 并使用 dart sass？我不想使用node sass，它浪费太多时间来处理安装和兼容问题。顺便说一句，这是我的项目package.json内容：

{
  "private": true,
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jiangxiaoqiang/crx-selection-translate.git"
  },
  "scripts": {
    "xpostinstall": "node ./build/install-pdf-viewer",
    "dev": "webpack --config build/webpack.dev.config.js",
    "build": "gulp --cwd . --gulpfile build/gulp-build.js",
    "test": "karma start build/karma.config.js"
  },
  "dependencies": {
    "bootstrap-sass": "^3.4.1",
    "chrome-call": "^1.0.2",
    "connect.io": "^3.1.3",
    "interact.js": "^1.2.6",
    "js-wheel": …