18292


browserifyであれば、ignoreに追加したモジュールは無害化され、require()は空の参照を返します。  
webpackで同様のことをしたいと思い、以下のような`webpack.config.babel.js`の`external`を利用してビルドを行いましたが、htmlから読み込むと`ReferenceError:
express is not defined`となってしまいます。

[code]

    npm run build
    
    # > webpack-external-trouble@ build /Users/59naga/Downloads/fuga
    # > webpack
    
    # Hash: 6a8e05a3b6e4983a8b39
    # Version: webpack 1.12.2
    # Time: 229ms
    #         Asset     Size  Chunks             Chunk Names
    #     bundle.js  2.24 kB       0  [emitted]  main
    # bundle.js.map  1.91 kB       0  [emitted]  main
    #     + 2 hidden modules
    
[/code]

`webpack.config.babel.js`

[code]

    import webpack from 'webpack'
    
    export default {
      context: __dirname,
      entry: "./index.js",
    
      output: {
        path: __dirname,
        filename: 'bundle.js'
      },
    
      externals: [
        'express',
      ],
    
      module: {
        loaders: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loaders: ["babel-loader"],
          },
        ],
      },
    
      devtool: '#source-map',
    }
    
[/code]

`package.json`

[code]

    {
      "name": "webpack-external-trouble",
      "private": true,
      "scripts": {
        "build": "webpack"
      },
      "dependencies": {
        "babel-core": "^5.8.33",
        "babel-loader": "^5.3.3",
        "express": "^4.13.3",
        "webpack": "^1.12.2"
      },
      "babel": {
        "stage": 0
      }
    }
    
[/code]

`index.js`

[code]

    // Dependencies
    import express from 'express'
    
    // Publish as singleton
    class Module{
    
    }
    
    export default new Module
    
[/code]

[![index.htmlから読み込んだbundle.js](https://i.stack.imgur.com/9xy3Z.png)](https://i.stack.imgur.com/9xy3Z.png)

`bundle.js`を読み込んでも、`ReferenceError: express is not
defined`を起こさないためには`webpack.config.babel.js`をどのように設定すればよいでしょうか？


CC BY-SA 3.0
2015-11-01T06:52:07.190
18291
2018-09-28T22:34:03.590
2018-09-28T22:34:03.590
19110
9834
question
javascript node.js ecmascript-6 webpack babeljs
webpackでサーバー側のモジュールを無害化したい


> <https://github.com/webpack/webpack/issues/1021>  
>  こちらに方法が載っていました。

`package.json`の`browser`フィールドに無害化したいモジュール名を入力し、`webpack.config.babel.js`の`externals`は削除することで、`bundle.js`をhtmlから読み込んでもエラーが発生しなくなりました。

`package.json`

[code]

    {
      "name": "webpack-external-trouble",
      "private": true,
      "browser": {
        "express": false
      },
      "scripts": {
        "build": "webpack"
      },
      "dependencies": {
        "babel-core": "^5.8.33",
        "babel-loader": "^5.3.3",
        "express": "^4.13.3",
        "webpack": "^1.12.2"
      },
      "babel": {
        "stage": 0
      }
    }
    
[/code]

`webpack.config.babel.js`

[code]

    import webpack from 'webpack'
    
    export default {
      context: __dirname,
      entry: "./index.js",
    
      output: {
        path: __dirname,
        filename: 'bundle.js'
      },
    
      module: {
        loaders: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loaders: ["babel-loader"],
          },
        ],
      },
    
      devtool: '#source-map',
    }
    
[/code]

[![htmlからbundle.jsを読み込む](https://i.stack.imgur.com/8txB6.png)](https://i.stack.imgur.com/8txB6.png)


CC BY-SA 3.0
2015-11-01T07:06:04.363
18292
2015-11-01T07:06:04.363
9834
18291
answer