webpack打包

Question

这是项目的目录结构

webpack.config.js如下：

var ExtractTextPlugin = require("extract-text-webpack-plugin");
// 使用webpack打包
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "build.js"
  },
  module: {
    loaders: [
      //.css 文件使用 style-loader 和 css-loader 来处理
        {
        test: /.less$/,
        loader: ExtractTextPlugin.extract(
                'css?sourceMap!' +
                'less?sourceMap'
            )
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  // 内联css提取到单独的styles的css
  plugins: [new ExtractTextPlugin('styles.css')]
};

main.js如下：
require('../css/main.less');

我想问的是：当从入口文件main.js开始打包时，遇到依赖文件require('../css/main.less');时，处理过程是什么样子的？

Answer 1

这不是对问题的回答，只是记一下笔记，请大家踊跃回答哈！~

如果output中没有指定path属性，则打包之后的build.js和styles.css放在根目录下，如果output中指定了path属性，例如：path: path.resolve(__dirname, 'build')，则打包之后的build.js和styles.css放在根目录下的build文件夹中，若指定打包后的css文件夹名的时候还指定了路径，例如：plugins: [new ExtractTextPlugin('style/styles.css')],则打包之后的build.js放在根目录下的build文件夹中,和styles.css放在根目录/build/style文件夹中。