Question

我做了一些测试来处理位于webpack文件夹之外的文件。我有三个简单的文件：

/*entry.js*/
import style from "./style.css";
import string from "./content.js";

console.log(string);

/*style.css*/
body {
    background: beige;
}

/*content.js*/
export default string = "It works from content.js.";

我使用ES6语法，所以我有.babelrc这样：

{
  "presets": [
    "react",
    "es2015"
   ]
}

这是我的webpack.config.js： var webpack = require（＆＃39; webpack＆＃39;）;

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  entry: './../outsidefolder/client/wptest/entry.js',
  //entry: './entry.js',
  debug:true,
  devtool:'source-map',
  resolve: {
    extensions: ['', '.js', '.jsx', '.css']
  },
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loaders: ['babel']
          },{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
          }
        ]
      },
      plugins: [
        new ExtractTextPlugin("app.css",{
          allChunks: true
        })
      ]
    };

我的package.json

{
  "private": true,
  "devDependencies": {
    "babel": "^6.3.26",
    "babel-core": ">=5.8.29",
    "babel-loader": ">=5.3.2",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "browser-sync": "^2.9.11",
    "css-loader": "^0.21.0",
    "extract-text-webpack-plugin": "^0.8.2",
    "react-hot-loader": "^1.3.0",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.2",
    "webpack-dev-middleware": "^1.2.0",
    "webpack-dev-server": "^1.12.1",
    "webpack-hot-middleware": "^2.4.1",
    "write-file-webpack-plugin": "^1.0.0"
  }
}

当我的条目为entry: './entry.js'时，一切正常。但是当我的外部文件夹entry: './../outsidefolder/client/wptest/entry.js',的入口指向出错时，我有这个错误：

ERROR in ../oustsidefolder/client/wptest/entry.js
Module parse failed: /Users/vikti/dev/webpacktut/node_modules/babel-loader/index.js!/Users/vikti/dev/oustsidefolder/client/wptest/entry.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import style from "./style.css";
| import string from "./content.js";
|

是否可以使用根文件夹之外的webpack处理文件？

Answer 1

使用path.join()和dirname创建条目文件的绝对路径。

webpack.config.js

var path = require('path');

//...

entry: path.join(__dirname, './../outsidefolder/client/wptest/entry.js'),

//...

如何在root webpack文件夹之外输入？

1 个答案: