Svelte webpack 配置全攻略

为什么要配置 webpack

svelte 常规是 Rollup 配置，但我们常用 webpack 。为了降低学习成本以及复习 webapck 配置，所以，少年动起来吧！

怎么配置

区分几个模块，逐一配置好，就好了。

配置 svelte 文件处理

// webpack.config.js
var config = {
  ...
  module: {
    rules: [
      {
        test: /\.(svelte)$/,
        include: [
          path.resolve(basePath, 'src'),
          // 如果使用路由库/第三方库含有 svelte 文件的，也要添加进来
          path.resolve(basePath, 'node_modules/svelte-spa-router')
        ],
        use: [
          {
            loader: 'svelte-loader',
            options: {
              emitCss: true,
            },
          }
        ],
      }
    ]
  }
}

配置css处理

// webpack.config.js
var config = {
  ...
  module: {
    rules: [
      {
        // css 配追跟一般配置一样
        test: /\.css$/,
        use: [
          isProduction ?  MiniCssExtractPlugin.loader : 'style-loader', 
          'css-loader', 
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                // 按需使用插件
                plugins: [
                  [
                    'postcss-preset-env',
                    {
                      browsers: ['Android >= 4.0', 'iOS >= 7']
                    }
                  ],
                  [
                    'postcss-pxtorem',
                    {
                      // px to rem, 二倍稿 750px, 750 / 100 = 7.5
                      rootValue: 7.5,
                      propList: ['*']
                    }
                  ]                  
                ]
              }
            },
          }
        ]
      }
    ]
  },
  
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
  ]
}

配置 babel 处理

// webpack.config.js
var config = {
  ...
  module: {
    rules: [
      {
        test: /\.(js)$/,
        include: [
          path.resolve(basePath, 'src')
        ],
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env', 
                  {
                    "useBuiltIns": "entry",
                    "corejs": 3,
                    "targets": {
                      "browsers": ["Android >= 5.1"]
                    }
                  }
              ]
            ],
            "plugins": [
              "@babel/plugin-transform-runtime"
            ]
          }
        }]
      }
    ]
  }
}

配置静态资源处理

// webpack.config.js
var config = {
  ...
  module: {
    rules: [
     {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'file-loader',
        options: {
          limit: 10000,
          name: 'static/assets/images/[name].[hash:7].[ext]',
        },
      },
      // 处理多媒体文件
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/assets/media/[name].[hash:7].[ext]',
        },
      },
      // 处理字体文件
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/assets/fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  }
}

配置 webpack-dev-server

// webpackDevServer.config.js
const Webpack = require('webpack');
const webpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config');
const PORT = 9000;
const HOST = '0.0.0.0';

// webpack-dev-server options
const options = {

  contentBase: './dist',
  watchContentBase: true,
  hot: true,
  historyApiFallback: false,
  compress: true,
  proxy: {},
  
  watchOptions: {
    aggregateTimeout: 300,
    poll: 300,
    // infoVerbosity: 'verbose'
  },
  // It's a required option.
  publicPath: "/",
  // Shows a full-screen overlay in the browser when there are compiler errors or warnings.
  overlay: true
};

var compiler = Webpack(config);

var server = new webpackDevServer(compiler, options); 

server.listen(PORT, HOST, function (err) {
  if (err) return console.log(err);
  console.log('dev server listening on port ' + PORT);
});

这里开启热更新，需要配置 webpack.config.js :

// webpack.config.js
const isDev = process.env.NODE_ENV === 'development';

var config = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: path.join(basePath, 'public/index.html')
    }),
    isDev && new webpack.HotModuleReplacementPlugin(),
  ]
}

{
    "scripts": {
    "dev": "NODE_ENV=development node config/webpackDevServer.config.js",
    "start": "yarn run dev"
  }
}

yarn start

至此，就可以愉快地跑起来啦。