Webpack 路径问题答案

【问题标题】：Webpack path problemsWebpack 路径问题
【发布时间】：2016-12-21 00:22:02
【问题描述】：

开始学习webpack，遇到一个问题

项目结构

webpack-project/
|-- frontend/
|    |-- index.html
|    |-- main.js
|
|-- src/
|    |-- images/
|    |   |-- img.jpg
|    |
|    |-- menu/
|    |   |-- style.css
|    |
|    |-- home.js
|    |-- variable.js
|
|-- webpack.config.js

webpack.config

let autoprefixer = require('autoprefixer');
module.exports = {
  context: __dirname + '/src',
  entry: './home.js',
  output: {
    path: __dirname + '/frontend',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ["env"]
        }
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!postcss-loader!sass-loader'
      },
      {
        test: /\.(jpg|png|svg)$/,
        loader: 'file-loader?name=[path][name].[ext]'
      }
    ]
  },
  postcss: [autoprefixer({browsers: ['last 2 versions']})]
};

当使用context: __dirname + '/src' 运行 webpack 时会提示错误

ERROR in ./menu/style.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../node_modules/css-loader/index.js in C:\Users\Admin\Websto
rmProjects\webpack-project/src\menu
 @ ./menu/style.scss 4:14-167

ERROR in ./menu/style.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../node_modules/style-loader/addStyles.js in C:\Users\Artem\
WebstormProjects\webpack-project/src\menu
 @ ./menu/style.scss 7:13-71

当使用entry 代替上下文时：'./src/home.js'

但是图片路径变成绝对的frontend/src/images/，而不是frontend/images/

【问题讨论】：

标签： javascript node.js webpack

【解决方案1】：

我决定了我的问题。

经过几个小时的搜索，我查看了官方文档：/

http://webpack.github.io/docs/troubleshooting.html#windows-paths

【讨论】：