Question

我正在尝试将小项目（主要是带有一些LESS和JS文件的服务器端）客户端构建从Gulp迁移到Webpack。

我有以下路径：
-“样式/reset.less”
-“ styles / mixins.less”
-“ styles / styles.less”
-“ scripts / scripts.js”

我只需要：

1-将较少的文件编译为一个“ app.css”文件，并将其最小化为“ app.min.css”。
2-将“ scripts.js”文件缩小为“ app.min.js”。

我有以下package.json文件：

{
  "devDependencies": {
    "webpack": "4.21.0"
  },
  "dependencies": {
    "less-loader": "4.1.0"
  }
}

并创建了以下webpack.config.js文件：

const webpack = require("webpack");

module.exports = {

  module: {
    rules: [{
      test: /\.less$/,
      loader: 'less-loader', options: {
        strictMath: true,
        noIeCompat: true
      }
    }]
  }  

};

如何配置webpack来制作（1）和（2）？

另一个问题：这些文件之一更改时是否可以重建？

更新

在Rick van Osta回答之后，我将package.json更新为：

{
  "name": "app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "webpack --config webpack.config.js --watch"
  },
  "devDependencies": {
    "webpack": "4.21.0",
    "webpack-cli": "3.1.2",
    "css-loader": "1.0.0",
    "less-loader": "4.1.0",
    "mini-css-extract-plugin": "0.4.4",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "uglifyjs-webpack-plugin": "2.0.1"
  },
  "dependencies": {}
}

然后将webpack.config.js更改为：

const webpack = require('webpack');

var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {

  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.min.css',
    })
  ],

  resolve: {
    extensions: ['.js'],
  },

  entry: {
    'scripts.min': './scripts/scripts.js',
  },  

  output: {
    filename: "[name].js"
  },

  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: false
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },

  module: {
    rules: [
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      }
    ]
  }

};

然后我使用运行了Webpack，出现以下错误：

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):
Error: Cannot find module 'less'

我做错什么了吗？

Answer 1

首先，您的帖子包含很多问题。最好将它们分开。无论如何，您的问题是：

解析较少的文件
将LESS编译为CSS
缩小CSS
将CSS提取到另一个文件（这不是您的问题的一部分，但是webpack由于某种原因被称为“捆绑包”。它将包含在一个捆绑包中。）
缩小Java语言
更改后重建

我可以为您拍一个配置文件，但是这样做的乐趣在哪里？

将LESS编译为CSS并解决LESS

如果要使用webpack将少部分内容编译到CSS中，则必须将文件导入Javascript。否则，webpack将不知道您要包括哪些文件。规则只是告诉webpack如何处理较少的文件导入。它不会自己寻找它们。另外，您需要将Javascript文件设置为入口点。确保styles.less文件导入其他较少的文件，以获取完整的css文件，或单独导入所有较少的文件。

// scripts.js
import "../styles/styles.less";
...

webpack配置应该设置入口点（非常重要，即使您只想执行Javascript部分）：

// webpack.config.js
module.exports = {
...
resolve: {
    extensions: [".js"],
},
entry: {
    'app.min': "./scripts/scripts.js",
},
output: {
    filename: "[name].js"
},
...

您的较少装载者将完成其余工作。

缩小CSS

Webpack 5可能会包含一个缩小器来为您执行此操作，但是使用Webpack 4时，您需要自己携带。一个好的CSS优化器应该是optimize-css-assets-webpack-plugin。

首先，使用npm安装插件。

npm install optimize-css-assets-webpack-plugin --save-dev

然后，将其包含在配置文件的顶部。

var OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

最后，将插件设置为您自己的缩小器。

optimization: {
  minimizer: [
    new OptimizeCSSAssetsPlugin({})
  ]
},

将CSS提取到另一个文件

为此，您还需要一个插件。适合该任务的将是mini-css-extract-plugin。

首先，安装插件。

npm install mini-css-extract-plugin --save-dev

您还需要LESS加载器和CSS加载器来完成此任务，因此也要安装它们。假设您已经拥有较少的装载程序，那么下面的内容就足够了。

npm install css-loader --save-dev

然后，将其包含在配置中：

var MiniCssExtractPlugin = require("mini-css-extract-plugin");

之后，将其作为插件包含在您的配置中：

plugins: [
  new MiniCssExtractPlugin({
    filename: 'app.min.css',
  })
],

最后，在您的加载程序配置中包含插件加载程序。

module: {
  rules: [
    {
      test: /\.less$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'less-loader',
      ],
    }
  ]
}

缩小Javascript代码

为了缩小Javascript，您应该包含一个webpack minify插件。一个很好的例子是uglifyjs webpack plugin。

首先，使用npm安装插件。

npm install uglifyjs-webpack-plugin --save-dev

然后，需要在Webpack配置顶部的插件。

var uglify = require('uglifyjs-webpack-plugin');

最后，在webpack配置中定义您的插件，以及前面提到的CSS缩小器。

optimization: {
  minimizer: [
    new UglifyJsPlugin({
      cache: true,
      parallel: true,
      sourceMap: true // set to true if you want JS source maps
    }),
    new OptimizeCSSAssetsPlugin({})
  ]
},

这将确保每当运行webpack时，都会触发该插件，并会（使用uglifyjs）缩小您的代码。

更改时重新编译代码

这很容易。 Webpack带有一个内置标志，用于监视代码中的更改。

只需将-w添加到您的通话中，它将监视您的代码。

webpack -w

由于大量问题，我可能错过了很多，但这至少应该让您入门。

使用Webpack压缩并最小化LESS文件和最小化JS文件

1 个答案:

将LESS编译为CSS并解决LESS

缩小CSS

将CSS提取到另一个文件

缩小Javascript代码

更改时重新编译代码