从Gulp切换到Webpack

5 回答

• 0

  我认为你不需要postcss loader . 我的意思是，暂时 . 你只是从一个工具移动到另一个工具，所以你应该保持尽可能精益 .

  { 
    test: /(\.css|\.scss)$/, 
    include: path.join(__dirname, 'src'), 
    loaders: ['style-loader', 'css-loader', 'sass-loader'] 
  }
  

  请注意，我的代码中的 include 取决于您的配置 . 在那之后我会考虑摆脱你吞下的'relative'路径 . 如果你想维持一个 development 和 production 环境，它可能会破坏你的东西 . 只是个人经历 .

  回复于 2024-04-26T16:08:36+08:00
• 1

  这取决于问题的答案：你认为加载css作为webpack bundle的一部分有没有优势 . 如果您要使用 <link> 将css加载到浏览器，那么webpack可能不会给您带来任何好处 .

  除了“有一个工具” . 但不是一个配置 - 不要忘记你仍然需要特定的webpack配置，只编译css到speadup开发（编译js非常慢）并且它不是那么容易实现（当你编译时当前的webpack 4有一些副作用只有css） .

  回复于 2024-04-26T16:08:36+08:00
• 0

  好的，由于这个tutroial，我得到了一些很好的成就： https://www.phase2technology.com/blog/bundle-your-front-end-with-webpack/

  我的第一个方法是：

  webpack-config.js

  'use strict';
  
  const webpack    = require('webpack'),
      path         = require('path'),
      autoprefixer = require('autoprefixer'),
      glob         = require('glob');
  
  let script = {
      entry: {
           'scripts': glob.sync('./_javascript/*.js'),
      },
      module: {
          loaders: [
              // Javascript: js, jsx
              {
                  test: /\.jsx?$/,
                  loader: 'babel-loader'
              },
              // CSS: scss, css
              {
                  test: /\.s?css$/,
                  loaders: ['style', 'css', 'sass', 'postcss-loader']
              },
              // SVGs: svg, svg?something
              {
                  test: /\.svg(\?.*$|$)/,
                  loader: 'file-loader?name=/img/[name].[ext]'
              },
              // Images: png, gif, jpg, jpeg
              {
                  test: /\.(png|gif|jpe?g)$/,
                  loader: 'file?name=/img/[name].[ext]'
              },
              // HTML: htm, html
              {
                  test: /\.html?$/,
                  loader: "file?name=[name].[ext]"
              },
              // Font files: eot, ttf, woff, woff2
              {
                  test: /\.(eot|ttf|woff2?)(\?.*$|$)/,
                  loader: 'file?name=/fonts/[name].[ext]'
              }
          ]
      },
      output: {
          path: './resources/js',
          filename: 'bundle--[name].js'
      },
      plugins: [
          new webpack.optimize.CommonsChunkPlugin(['scripts'], 'bundle--[name].js'),
          new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
      }
  })
  ]
  };
  
  let style = {
      entry: {
          'styles': glob.sync('./_nextcss/*.css'),
      },
      module: {
          loaders: [
              {
                  test: /\.s?css$/,
                  loaders: ['style', 'css', 'sass', 'postcss-loader']
              },
          ]
      },
      postcss: function (webpack) {
          return [
              require("postcss-import")({
                  addDependencyTo: webpack
              }),
              require("postcss-url")(),
              require("postcss-cssnext")(),
              require("postcss-browser-reporter")(),
              require("postcss-reporter")(),
          ]
      },
      output: {
          path: './resources/css',
          filename: 'bundle--[name].css'
      },
  };
  
  module.exports = [
      script,
      style,
  ];
  

  这会成功生成一个 bundle--script.js ，但我对css部分有一些问题 .

  它不会预处理任何东西：/

  如果我在此期间开始工作，我会在这里更新，如果有人能指导我，我会非常感激 .

  回复于 2024-04-26T16:08:36+08:00
• 5

  对于简单的项目，我根本不推荐切换 . 最后，我认为这是个人品味，我更喜欢通过易于理解的javascript（gulp）进行后期处理 .

  正如你在你的问题中所说，你当前的设置运作良好：那为什么要修复一些没有破坏的东西呢？我专注于重构你的gulp代码，使其更具可读性，将长函数分成更小的gulp任务 .

  最后，使用webpack需要学习很多特定的webpack相关配置选项，而gulp你主要只是管道vanilla js命令 .

  回复于 2024-04-26T16:08:36+08:00
• 5

  Gulp和Webpack的概念完全不同：您告诉Gulp如何将前端代码一步一步地放在一起，但是您可以通过配置文件告诉Webpack您想要什么 . 因此，如果要切换，则没有简单的一对一映射 .

  在过去的一年里，我们公司从Gulp搬到了Webpack . 我发现理解这两个工具的差异对过渡非常有帮助 . 这是一篇简短的文章（5分钟阅读）我写的解释思维方式的变化：https://medium.com/@Maokai/compile-the-front-end-from-gulp-to-webpack-c45671ad87fe

  虽然我们的过渡需要一些时间，但我们想出了如何将我们在Gulp所做的全部工作转移到Webpack . 所以对我们来说，我们在Gulp所做的一切我们也可以通过Webpack完成，但不是相反 .

  回复于 2024-04-26T16:08:36+08:00