Question

在为大型项目设置Webpack配置时遇到一些问题。

我的项目的目录和文件层次结构非常困难。

我想创建webpack配置来监视该项目上的所有文件（less和js），并将2个文件推送到“ dist”目录下full.css和full.js，然后使用uglifyjs对其进行优化并压缩CSS。

我在项目中成功安装了一些（也许我需要安装更多的deps）deps。

有我的package.json文件

{
  "name": "my_project",
  "version": "1.0.0",
  "description": "my_project-webpack",
  "main": "",
  "directories": {
    "doc": "docs",
    "test": "tests"
  },
  "dependencies": {
    "uglifyjs-webpack-plugin": "^1.2.7"
  },
  "devDependencies": {
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "less": "^3.8.0",
    "less-loader": "^4.1.0",
    "style-loader": "^0.21.0",
    "webpack": "^3.4.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "me",
  "license": "ISC"
}

有我的webpack.config.js文件

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {

    context: path.join(__dirname, 'r3'),

    entry: '????',

    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
    },

    module: {
        rules: [
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'less-loader']
                })
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin({
            filename: 'full.css',
            allChunks: true
        }),
    ],

    devtool: "source-map",

};

问题是，如果我的项目中有许多不同的目录，它们都有自己的目录，但目录中仍然有文件。

我需要创建哪个入口点？如何正确编写一个配置文件，使该项目中所有较少的文件和js聚集在目录“ dist”中的2个otdelnyh文件中，然后仍然将其添加到sourcemap和uglifyjs中。

这是项目树（大约）：

my_project
 - public(dir)
   - css(dir)
    - alt(dir)
     - less(dir)
      - banners(dir)
       -- banners.less
    -- promo.css
    -- popup.css
    -- ...
index.php
package.json
webpack.config.js
.htaccess

带有更少加载器的webpack配置/ uglifyjs /

0 个答案: